/* ------------------------------------------------------------------
   CableCalc 18-4 Hero
------------------------------------------------------------------ */
.cc184-hero, .cc184-hero * {
  box-sizing: border-box;
}
.cc184-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  overflow: hidden;
  color: #fff;
  background-color: #000108;
  background-image: image-set(url("../images/cablecalc18-4/cablecalc-hero-1920px.webp") 1x, url("../images/cablecalc18-4/cablecalc-hero-3840px.webp") 2x);
  background-size: auto 100%;
  background-position: center right;
  background-repeat: no-repeat;
}
.cc184-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 1, 8, .88) 0%, rgba(0, 1, 8, .68) 28%, rgba(0, 1, 8, .15) 58%, rgba(0, 1, 8, 0) 100%);
}
.cc184-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 45px 32px 38px;
}
.cc184-hero__copy {
  max-width: 560px;
  text-align: left;
}
/* Title */
main .cc184-hero h1, .cc184-hero-title {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  color: #fff;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: 800;
  line-height: .95;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
  background: none;
  border: 0;
  box-shadow: none;
}
.cc184-hero-title__brand {
  display: inline;
  color: #fff;
  font-size: clamp(3rem, 4.2vw, 4.2rem);
}
.cc184-hero-title__version {
  display: inline;
  margin-left: 12px;
  color: #ff7a00;
  font-size: clamp(2.85rem, 4vw, 4rem);
}
.cc184-hero-title__desc {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, .75);
  font-size: clamp(.82rem, 1vw, 1.02rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.cc184-hero-title__sup {
  display: inline-block;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 30px;
  background: #ff8c00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Copy */
.cc184-hero__lead {
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 3px solid #bc5c22;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: clamp(19px, 1.2vw, 27px);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.3px;
}
.cc184-hero__text {
  max-width: 420px;
  margin: 0 0 24px;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}
.cc184-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.cc184-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 5px;
  background: #ff7a00;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  transition:
    background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cc184-hero__button:hover {
  background: #e87513;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(0, 0, 0, .28);
}
.cc184-hero__button--secondary {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .55);
}
.cc184-hero__button--secondary:hover {
  background: rgba(255, 255, 255, .16);
}
.cc184-hero__note {
  max-width: 390px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.45;
}
/* Feature strip */
.cc184-hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 960px;
  margin-top: 40px;
}
.cc184-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 230px;
  min-width: 210px;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, .28);
  text-align: left;
}
.cc184-feature:last-child {
  border-right: 0;
}
.cc184-feature__icon {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  color: #ff7a00;
}
.cc184-feature__icon svg {
  display: block;
  width: 40px;
  height: 40px;
}
.cc184-feature strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 700;
}
.cc184-feature p {
  margin: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  line-height: 1.4;
}
/* Responsive */
@media (max-width: 1400px) {
  .cc184-hero {}
}
@media (max-width: 1200px) {
  .cc184-hero {
    min-height: 560px;
    background-position: 62% center;
  }
  .cc184-hero__inner {
    padding: 38px 28px 34px;
  }
  .cc184-hero__copy {
    max-width: 420px;
  }
  main .cc184-hero h1 {
    font-size: clamp(38px, 4vw, 58px);
  }
  .cc184-hero__lead {
    max-width: 420px;
    font-size: clamp(18px, 2vw, 24px);
  }
  .cc184-hero__features {
    max-width: 760px;
    margin-top: 34px;
  }
}
@media (max-width: 800px) {
  .cc184-hero {
    background-image: url("../images/cablecalc18-4/cablecalc-hero-mobile.webp?v=1");
    background-position: bottom center;
    background-size: 100% auto;
    padding-bottom: 400px;
  }
  .cc184-hero::before {
    background: linear-gradient(180deg, rgba(0, 1, 8, .95) 0%, rgba(0, 1, 8, .90) 30%, rgba(0, 1, 8, .65) 50%, rgba(0, 1, 8, .25) 62%, transparent 78%);
  }
  .cc184-hero__inner {
    padding: 42px 18px 34px;
  }
  .cc184-hero__copy, .cc184-hero__text, .cc184-hero__features, .cc184-hero__lead {
    width: 100%;
    max-width: none;
  }
  main .cc184-hero h1 {
    font-size: 42px;
    letter-spacing: -.5px;
  }
  .cc184-hero__lead {
    font-size: 21px;
  }
  .cc184-hero__text {
    font-size: 14px;
  }
  .cc184-hero__button {
    padding: 13px 20px;
    font-size: 15px;
  }
  .cc184-hero__features {
    display: block;
    margin-top: 30px;
  }
  .cc184-feature {
    min-width: 0;
    padding: 14px 0;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, .20);
  }
  .cc184-feature:first-child {
    border-top: 0;
  }
}
@media (max-width: 600px) {
  .cc184-hero {
    background-size: contain;
    padding-bottom: 350px;
  }
  .cc184-hero__inner {
    padding: 36px 20px 32px;
  }
  main .cc184-hero h1 {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.5px;
    white-space: normal;
  }
  .cc184-hero-title__brand, .cc184-hero-title__version {
    font-size: 2.35rem;
  }
  .cc184-hero-title__version {
    margin-left: 8px;
  }
  .cc184-hero-title__desc {
    font-size: .72rem;
    letter-spacing: .14em;
  }
  .cc184-hero__lead {
    margin-bottom: 16px;
    padding-top: 12px;
    font-size: 19px;
    line-height: 1.3;
  }
  .cc184-hero__text {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
  }
  .cc184-hero__button {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
  }
  .cc184-hero__note {
    font-size: 13px;
  }
  .cc184-hero__features {
    margin-top: 28px;
  }
}
@media (max-width: 420px) {
  .cc184-hero {
    padding-bottom: 220px;
  }
  main .cc184-hero h1 {
    font-size: 32px;
  }
  .cc184-hero-title__brand, .cc184-hero-title__version {
    font-size: 2rem;
  }
  .cc184-hero__lead {
    font-size: 18px;
  }
  .cc184-hero__button {
    font-size: 14px;
  }
}
/* ------------------------------------------------------------------
   CableCalc 18-4 Overview
------------------------------------------------------------------ */
.cc184-overview, .cc184-overview * {
  box-sizing: border-box;
}
.cc184-overview {
  position: relative;
  overflow: hidden;
  padding: 40px 10px;
  background: #f6f8fc;
}
.cc184-overview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../images/cablecalc18-4/overview-background.webp");
  background-size: cover;
  background-position: center;
  opacity: .30;
  pointer-events: none;
}
.cc184-overview__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  gap: 55px;
  align-items: center;
}
.cc184-overview__content {
  max-width: 660px;
}
.cc184-section-tag {
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 15px;
  border-radius: 999px;
  background: #e8eef6;
  color: #35485d;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cc184-overview h2 {
  margin: 0 0 26px;
  padding: 0;
  color: #15263d;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 3vw, 3.15rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -1px;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  background: none;
  border: 0;
}
.cc184-overview p {
  margin: 0 0 18px;
  padding: 0;
  color: #516176;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
}
.cc184-overview p.lead {
  color: #263b55;
  font-size: 1.08rem;
  font-weight: 500;
}
.cc184-overview__video {
  padding: 14px;
  border: 1px solid #dce4ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(17, 35, 58, .12);
}
.cc184-overview__video #video-container {
  width: 100%;
  margin: 0;
  padding: 0;
}
.cc184-overview__video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}
.cc184-video-caption {
  margin: 14px 4px 0;
  color: #637287;
  font-size: .88rem;
  line-height: 1.55;
  text-align: center;
}
.cc184-highlights {
  max-width: 1180px;
  margin: 55px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cc184-highlight {
  padding: 24px;
  border: 1px solid #e0e7f0;
  border-top: 4px solid #ff7a00;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(17, 35, 58, .08);
}
.cc184-highlight h3 {
  margin: 0 0 10px;
  padding: 0;
  color: #15263d;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-shadow: none;
}
.cc184-highlight p {
  margin: 0;
  color: #5f6e82;
  font-size: .92rem;
  line-height: 1.6;
}
/* ============================================================
   CableCalc overview — responsive layout
   Keep this after the main overview rules
   ============================================================ */
@media screen and (max-width: 900px) {
  .cc184-overview {
    padding: 55px 20px;
  }
  /*
     * Change the overview from two columns to one.
     * Text appears first and the video follows underneath.
     */
  .cc184-overview__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
    align-items: start;
    width: 100%;
    max-width: 760px;
  }
  .cc184-overview__content, .cc184-overview__video {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .cc184-overview__content {
    order: 1;
  }
  .cc184-overview__video {
    order: 2;
    max-width: 680px;
    margin: 0 auto;
  }
  .cc184-overview h2 {
    font-size: clamp(2rem, 6vw, 2.75rem);
  }
  /*
     * Change the four highlights to two columns on tablets.
     */
  .cc184-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin-top: 45px;
  }
}
@media screen and (max-width: 600px) {
  .cc184-overview::before {
    background-image: url("../images/cablecalc18-4/overview-background-mobile.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: .35;
  }
  .cc184-overview {
    padding: 45px 14px;
  }
  .cc184-overview__inner {
    gap: 30px;
  }
  .cc184-overview__content {
    width: 100%;
    min-width: 0;
  }
  .cc184-overview .cc184-section-tag {
    margin-bottom: 16px;
    padding: 6px 12px;
    font-size: 0.62rem;
    line-height: 1.4;
    letter-spacing: 0.8px;
  }
  .cc184-overview h2 {
    width: 100%;
    margin-bottom: 20px;
    font-size: 1.85rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
    overflow-wrap: normal;
    word-break: normal;
  }
  .cc184-overview p, .cc184-overview p.lead {
    width: 100%;
    font-size: 0.92rem;
    line-height: 1.65;
    overflow-wrap: normal;
    word-break: normal;
  }
  .cc184-overview p.lead {
    font-size: 1rem;
  }
  .cc184-overview__video {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border-radius: 14px;
  }
  .cc184-overview__video iframe {
    width: 100%;
    max-width: 100%;
    border-radius: 9px;
  }
  .cc184-video-caption {
    margin: 12px 3px 2px;
    font-size: 0.8rem;
    line-height: 1.5;
  }
  /*
     * Stack highlight cards on phones.
     */
  .cc184-highlights {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 35px;
  }
  .cc184-highlight {
    padding: 20px;
    border-radius: 13px;
  }
  .find_out_more {
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
  }
}
.cc184-overview__content {
  width: 100%;
  max-width: 660px;
  min-width: 0;
}
.cc184-overview__video {
  width: 100%;
  min-width: 0;
}
/* ------------------------------------------------------------------
   CableCalc 18-4 Level Wire Selector
------------------------------------------------------------------ */
#level_comparison {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 0;
  padding: 80px 0 100px;
  background-image: url("../images/cablecalc/cablecalc_level_background_3840px.jpg");
  background-size: auto 723px;
  background-position: top center;
  background-repeat: repeat;
}
/* Wires */
.wire_container {
  display: block;
  width: 100%;
  height: 80px;
  margin: 10px 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.wire_tip {
  display: block;
  height: 80px;
  margin: 0;
  padding: 0;
}
#cablecalc_level_1_wire, #cablecalc_level_2_wire, #cablecalc_level_3_wire, #cablecalc_level_4_wire {
  position: relative;
  float: left;
  display: inline-block;
  height: 100%;
  min-width: 50%;
  overflow: hidden;
  visibility: visible;
  text-align: right;
  background-repeat: repeat-x;
  background-size: auto 100%;
  transition:
    min-width .65s cubic-bezier(.22, .61, .36, 1), margin-right .65s cubic-bezier(.22, .61, .36, 1);
}
#cablecalc_level_1_wire {
  background-image: url("../images/cablecalc/brown_wire.png");
}
#cablecalc_level_2_wire {
  background-image: url("../images/cablecalc/black_wire.png");
}
#cablecalc_level_3_wire {
  background-image: url("../images/cablecalc/grey_wire.png");
}
#cablecalc_level_4_wire {
  background-image: url("../images/cablecalc/blue_wire.png");
}
/* Overlay */
.overlay_image {
  height: 50px;
  margin: 13px 50px;
  padding: 0;
  opacity: 1;
  transition: opacity .25s ease;
}
.overlay_image.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.overlay_heading {
  float: left;
  margin: 14px 0 0 -5000px;
  padding: 0;
  vertical-align: middle;
  transition: margin-left .75s cubic-bezier(.22, .61, .36, 1);
  color: #ffffff;
  font-size: 2.2em;
  line-height: 1em;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.78);
}
.black {
  color: #1b1b1b;
}
.white {
  color: #fffee8;
}
/* Collapsible level sections */
#cablecalc_level_1, #cablecalc_level_2, #cablecalc_level_3, #cablecalc_level_4 {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  padding: 0;
  transition:
    max-height .85s cubic-bezier(.22, .61, .36, 1), opacity .55s ease, transform .45s ease;
}
#cablecalc_level_1.is-open, #cablecalc_level_2.is-open, #cablecalc_level_3.is-open, #cablecalc_level_4.is-open {
  opacity: 1;
  transform: translateY(0);
}
/* Shared level inner */
.cc184-level1__inner, .cc184-level2__inner, .cc184-level3__inner, .cc184-level4__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 0;
}
/* Responsive backgrounds */
@media screen and (max-width: 1920px) {
  #level_comparison {
    background-image: url("../images/cablecalc/cablecalc_level_background_1920px.jpg");
  }
}
@media screen and (max-width: 1366px) {
  #level_comparison {
    background-image: url("../images/cablecalc/cablecalc_level_background_1366px.jpg");
  }
}
@media screen and (max-width: 768px) {
  #level_comparison {
    background-image: url("../images/cablecalc/cablecalc_level_background_768px.jpg");
  }
}
@media screen and (max-width: 600px) {
  .wire_container {
    height: 55px;
    margin: 5px 0;
  }
  .wire_tip, #cablecalc_level_1_wire, #cablecalc_level_2_wire, #cablecalc_level_3_wire, #cablecalc_level_4_wire {
    height: 55px;
  }
  .overlay_image {
    height: 25px;
    margin: 13px 0;
  }
  .overlay_heading {
    margin-top: 13px;
    font-size: 1.4em;
    letter-spacing: 1px;
  }
}
@media screen and (max-width: 560px) {
  #level_comparison {
    padding: 60px 0 40px;
    background-image: url("../images/cablecalc/cablecalc_level_background_560px.jpg");
    background-size: auto 500px;
  }
}
/* ==========================================================
   Shared CableCalc level title
   ========================================================== */
.cc184-level-title, .cc184-level-title * {
  box-sizing: border-box;
}
.cc184-level-title {
  --level-accent: #d78527;
  display: block;
  height: auto;
  min-height: 0;
  width: auto;
  max-width: 1240px;
  margin: 0 auto 24px;
  padding: 0;
  background: transparent;
  color: #fff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  text-align: left;
  position: relative;
  z-index: 5;
}
/* Smaller badge */
.cc184-level-title__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0 0 14px;
  padding: 5px 6px 5px 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(10, 14, 25, .84);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
  backdrop-filter: blur(6px);
}
.cc184-level-title__badge span {
  display: inline-block;
  color: #fff;
  font-size: .78rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc184-level-title__badge strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 8px;
  background: var(--level-accent);
  color: #fff;
  font-size: .74rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc184-level-title h2 {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  color: #f8f5ef;
  font-family: "Manrope", "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
  white-space: normal;
}
.cc184-level-title p {
  display: block;
  margin: 0;
  padding: 0;
  font-family: "Manrope", "Poppins", Arial, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
/* Level colours */
.cc184-level-title--l1 {
  --level-accent: #d78527;
}
.cc184-level-title--l2 {
  --level-accent: #b8a77f;
}
.cc184-level-title--l3 {
  --level-accent: #2f6b34;
}
.cc184-level-title--l4 {
  --level-accent: #7087e8;
}
/* ==========================================================
   Large titles: Levels 1 and 2
   ========================================================== */
.cc184-level1 .cc184-level-title, .cc184-level2 .cc184-level-title {
  max-width: 1080px;
  margin-bottom: 24px;
}
.cc184-level1 .cc184-level-title h2, .cc184-level2 .cc184-level-title h2 {
  max-width: 760px;
  font-size: clamp(1.9rem, 3vw, 3rem);
}
.cc184-level1 .cc184-level-title p, .cc184-level2 .cc184-level-title p {
  max-width: 760px;
  color: #e7d3b5;
  font-size: 1rem;
}
/* Level 2 warmer steel/champagne subtitle */
.cc184-level2 .cc184-level-title p {
  color: #d8c7a7;
}
/* ==========================================================
   Compact titles: Levels 3 and 4
   ========================================================== */
.cc184-level3 .cc184-level-title, .cc184-level4 .cc184-level-title {
  max-width: 560px;
  margin: 0 0 22px;
}
.cc184-level3 .cc184-level-title h2, .cc184-level4 .cc184-level-title h2 {
  max-width: 540px;
  font-size: clamp(1.55rem, 2.35vw, 2.35rem);
  line-height: 1.02;
}
.cc184-level3 .cc184-level-title p, .cc184-level4 .cc184-level-title p {
  max-width: 520px;
  font-size: .92rem;
  line-height: 1.42;
}
.cc184-level3 .cc184-level-title p {
  color: #d8d9c5;
}
.cc184-level4 .cc184-level-title p {
  color: #d5e1f3;
}
/* Body copy tone */
.cc184-level1__copy > p, .cc184-level2__body-copy p, .cc184-level3__copy > p, .cc184-level4__intro {
  color: rgba(255, 255, 255, .78);
}
/* Mobile */
@media (max-width: 620px) {
  .cc184-level-title {
    margin-bottom: 22px;
  }
  .cc184-level-title__badge span {
    font-size: .72rem;
  }
  .cc184-level-title__badge strong {
    min-height: 25px;
    padding: 0 10px;
    font-size: .7rem;
  }
  .cc184-level-title h2 {
    font-size: clamp(1.7rem, 9vw, 2.55rem);
  }
  .cc184-level-title p {
    font-size: .92rem;
  }
}
/* ==========================================================
   CableCalc 18-4 Level 1
   ========================================================== */
.cc184-level1 {
  color: #fff;
  padding: 54px 20px 38px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 145, 30, .14), transparent 32%), radial-gradient(circle at 15% 72%, rgba(255, 120, 0, .08), transparent 28%), linear-gradient(135deg, #1b120d 0%, #3b2718 45%, #241710 100%);
}
/* Top layout */
.cc184-level1__top {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
  gap: 44px;
  align-items: center;
}
.cc184-level1__copy p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .76);
  font-size: 1.04rem;
  line-height: 1.5;
  text-align: left;
}
.cc184-level1__list {
  margin: 24px 0 0 20px;
  padding: 0;
  list-style: none;
}
.cc184-level1__list li {
  position: relative;
  margin: 10px 0;
  padding-left: 34px;
  color: rgba(255, 255, 255, .92);
  font-size: .98rem;
  line-height: 1.35;
  text-align: left;
}
.cc184-level1__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border: 1px solid #ff9d1f;
  border-radius: 50%;
  color: #ff9d1f;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 800;
}
.cc184-level1__visual img {
  display: block;
  width: 108%;
  max-width: none;
  height: auto;
  margin-bottom: -40px;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .45));
}
/* Workflow cards */
.cc184-level1__workflow {
  margin-top: 20px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .30));
  border-radius: 14px;
}
.cc184-level1-step {
  position: relative;
  min-height: 185px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px rgba(0, 0, 0, .28);
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.cc184-level1-step:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 165, 30, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 35px rgba(0, 0, 0, .35);
}
.cc184-level1-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  font-size: 2.3rem;
  font-weight: 200;
  color: #ff981d;
  z-index: 20;
  opacity: .9;
}
.cc184-level1-step__header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  margin-bottom: 18px;
}
.cc184-level1-step__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ff981d;
  color: #141414;
  font-size: .95rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}
.cc184-level1-step h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.cc184-level1-step__icon {
  width: 72px;
  height: 72px;
  margin: 4px auto 18px;
  color: #ff991f;
}
.cc184-level1-step__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.cc184-level1-step p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: .8rem;
  line-height: 1.45;
  font-weight: 400;
}
/* Summary strip */
.cc184-level1__summary {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(520px, 1.35fr) minmax(520px, 1fr);
  gap: 34px;
  align-items: center;
  padding: 18px 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .22)), rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .28);
}
.cc184-level1__summary-main {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 24px;
  align-items: center;
}
.cc184-level1__summary-main-icon {
  width: 76px;
  height: 76px;
  color: #ff981d;
  display: grid;
  place-items: center;
}
.cc184-level1__summary-main-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level1__summary-copy {
  text-align: left;
}
.cc184-level1__summary-copy h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cc184-level1__summary-copy p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, .84);
  font-size: .82rem;
  line-height: 1.42;
}
.cc184-level1__mini-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.cc184-level1__mini-features div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.cc184-level1__icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #ff981d;
}
.cc184-level1__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level1__mini-features strong {
  color: rgba(255, 255, 255, .92);
  font-size: .8rem;
  line-height: 1.32;
  font-weight: 600;
}
/* Offer CTA */
.cc184-level1__offer {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 16px 22px;
  background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
}
.cc184-level1__offer p {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .96rem;
  line-height: 1.35;
  font-weight: 700;
}
.cc184-level1__offer strong {
  color: #ff9d1f;
}
.cc184-level1__offer a {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff9d1f, #ff7200);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.cc184-level1__offer a:hover, .cc184-level1__offer a:focus {
  background: linear-gradient(135deg, #FFAB3F, #FF8727);
  color: #fff;  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 24px rgba(214, 196, 145, .28);
}

/* Responsive */
@media (max-width: 1050px) {
  .cc184-level1__summary {
    grid-template-columns: 1fr;
  }
  .cc184-level1__summary-main {
    grid-template-columns: 76px 1fr;
  }
  .cc184-level1__mini-features {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 18px;
  }
  .cc184-level1__mini-features div:first-child {
    border-left: 0;
  }
}
@media (max-width: 1000px) {
  .cc184-level1__top {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cc184-level1__visual img {
    width: 100%;
  }
  .cc184-level1__workflow {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc184-level1-step::after {
    display: none;
  }
  .cc184-level1__offer {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
@media (max-width: 760px) {
  .cc184-level1 {
    padding: 48px 16px;
  }
  .cc184-level1__inner {
    padding: 10px;
  }
  .cc184-level1__visual img {
    width: 90%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .cc184-level1__workflow {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cc184-level1-step {
    min-height: auto;
    padding: 10px;
  }
  .cc184-level1__summary {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    text-align: center;
  }
  .cc184-level1__summary-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cc184-level1__summary-main-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto;
  }
  .cc184-level1__summary-copy {
    text-align: left;
  }
  .cc184-level1__mini-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cc184-level1__mini-features div {
    justify-content: flex-start;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 12px 0 0;
  }
  .cc184-level1__offer a {
    width: 100%;
    text-align: center;
    padding: 15px 0;
  }
}
@media (max-width: 520px) {
  .cc184-level1__workflow {
    grid-template-columns: 1fr;
  }
  .cc184-level1__visual img {
    width: 100%;
  }
}
/* ==========================================================
   CableCalc 18-4 Level 2
   ========================================================== */
.cc184-level2 {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 70% 12%, rgba(150, 165, 185, .12), transparent 28%), radial-gradient(circle at 20% 78%, rgba(255, 140, 0, .055), transparent 32%), linear-gradient(90deg, rgba(255, 255, 255, .014) 0, rgba(255, 255, 255, .014) 1px, transparent 1px, transparent 120px), linear-gradient(180deg, rgba(255, 255, 255, .01) 0, rgba(255, 255, 255, .01) 1px, transparent 1px, transparent 120px), linear-gradient(135deg, #050607 0%, #101112 42%, #171511 68%, #060606 100%);
}
/* Title */
.cc184-level2 .cc184-level-title {
  max-width: 1080px;
  margin: 0 auto 60px;
  text-align: left;
  position: relative;
  z-index: 4;
}
.cc184-level2 .cc184-level-title__badge strong {
  background: linear-gradient(135deg, #b8a77f, #7f8792);
  color: #fff;
}
.cc184-level2 .cc184-level-title h2 {
  max-width: 920px;
  font-size: clamp(1.85rem, 2.8vw, 2.85rem);
  line-height: .98;
  color: #f3f1eb;
}
.cc184-level2 .cc184-level-title p {
  max-width: 780px;
  margin: 0;
  color: #d8c7a7;
  font-size: .96rem;
  line-height: 1.35;
}
/* Hero visual */
.cc184-level2__visual {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto -110px;
}
.cc184-level2__visual::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 18%;
  bottom: 8%;
  z-index: 0;
  background: radial-gradient(circle, rgba(180, 190, 205, .13) 0%, rgba(120, 130, 145, .055) 45%, transparent 76%);
  filter: blur(70px);
}
.cc184-level2__visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(100%, 1180px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 30px 42px rgba(0, 0, 0, .58));
}
/* Shared widths */
.cc184-level2__highlights, .cc184-level2__body-copy, .cc184-level2__features, .cc184-level2__bottom-row {
  position: relative;
  z-index: 3;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
/* Highlights */
.cc184-level2__highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 32px;
  padding: 18px 0;
  border: 1px solid rgba(184, 167, 127, .34);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), rgba(0, 0, 0, .34);
}
.cc184-level2__highlight {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 28px;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.cc184-level2__highlight:last-child {
  border-right: 0;
}
.cc184-level2__highlight svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: #b8a77f;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level2__highlight h3 {
  margin: 0;
  color: #fff;
  font-size: .96rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Body copy */
.cc184-level2__body-copy {
  margin-bottom: 38px;
}
.cc184-level2__body-copy p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .78);
  font-size: 1.04rem;
  line-height: 1.55;
  text-align: left;
}
/* Feature tiles */
.cc184-level2__features {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 46px;
}
.cc184-level2-card {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  column-gap: 16px;
  align-items: center;
  min-height: 146px;
  padding: 16px 18px 16px 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .008)), rgba(12, 12, 12, .72);
  border: 1px solid rgba(184, 167, 127, .26);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .03), 0 10px 22px rgba(0, 0, 0, .35);
  transition: transform .22s, border-color .22s, background .22s;
}
.cc184-level2-card:hover {
  transform: translateY(-2px);
  border-color: rgba(207, 188, 142, .58);
}
.cc184-level2-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 74px;
  background: linear-gradient(180deg, rgba(184, 167, 127, .10), rgba(184, 167, 127, .025));
  border-right: 1px solid rgba(184, 167, 127, .14);
}
.cc184-level2-card__number {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #d2bc83, #8d8064);
  color: #101114;
  font-size: .82rem;
  font-weight: 800;
}
.cc184-level2-card__icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2ad7d;
}
.cc184-level2-card__icon svg {
  display: block;
  width: 70px;
  height: 108px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level2-card > div {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.cc184-level2-card h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: .84rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
}
.cc184-level2-card p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: .9rem;
  line-height: 1.42;
  text-align: left;
}
/* Bottom comparison / offer */
.cc184-level2__bottom-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(280px, .72fr);
  gap: 14px;
  align-items: stretch;
}
.cc184-level2__comparison, .cc184-level2__offer {
  border: 1px solid rgba(184, 167, 127, .30);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(0, 0, 0, .24)), rgba(0, 0, 0, .36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 28px rgba(0, 0, 0, .30);
}
.cc184-level2__comparison {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) 70px minmax(0, 1.1fr);
  padding: 34px 24px 20px;
}
.cc184-level2__comparison-badge {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 250px;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid rgba(184, 167, 127, .28);
  background: linear-gradient(180deg, rgba(24, 24, 24, .96), rgba(10, 10, 10, .96));
}
.cc184-level2__comparison-badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #b8a77f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level2__comparison-badge span {
  color: #ece6d8;
  font-size: .96rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cc184-level2__comparison-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
  text-align: left;
}
.cc184-level2__comparison-panel h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cc184-level2__comparison-panel--level1 h3 {
  color: #d78527;
}
.cc184-level2__comparison-panel--level2 h3 {
  color: #b8a77f;
}
.cc184-level2__comparison-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cc184-level2__comparison-panel li {
  position: relative;
  margin: 0;
  padding: 7px 0 7px 32px;
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  line-height: 1.25;
}
.cc184-level2__comparison-panel li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #111;
  font-size: .7rem;
  font-weight: 900;
}
.cc184-level2__comparison-panel--level1 li::before {
  background: linear-gradient(135deg, #efab43, #d78527);
  box-shadow: 0 0 10px rgba(215, 133, 39, .25);
}
.cc184-level2__comparison-panel--level2 li::before {
  background: linear-gradient(135deg, #d2bc83, #9b9075);
  box-shadow: 0 0 10px rgba(184, 167, 127, .22);
}
/* Comparison arrow */
.cc184-level2__comparison-centre {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: -8px;
}
.cc184-level2__comparison-centre::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}
.cc184-level2__comparison-arrow {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 30%, #d8cfb2 0%, #c6b68a 55%, #b79d65 100%);
  border: 1px solid rgba(208, 193, 152, .55);
  color: #25231f;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .28), inset 0 1px 1px rgba(255, 255, 255, .30);
}
.cc184-level2__comparison-arrow svg {
  display: block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
/* Offer */
.cc184-level2__offer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 26px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(184, 167, 127, .12), transparent 45%), rgba(0, 0, 0, .38);
}
.cc184-level2__offer-badge {
  display: none;
}
.cc184-level2__offer p {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  line-height: 1.32;
}
.cc184-level2__offer strong {
  display: block;
  margin-bottom: 8px;
  color: #c6b186;
  font-size: .88rem;
  line-height: 1.28;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cc184-level2__offer a, .cc184-level2__offer a:visited {
  display: block;
  padding: 13px 18px;
  border-radius: 7px;
  background: linear-gradient(135deg, #c8b487, #a89670);
  color: #111;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
  transition:
    background .25s ease, transform .2s ease, box-shadow .25s ease, color .25s ease;
}
.cc184-level2__offer a:hover, .cc184-level2__offer a:focus {
  background: linear-gradient(135deg, #d9c79b, #bea779);
  color: #111;
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 0 24px rgba(214, 196, 145, .28);
}
/* Responsive */
@media (max-width: 1100px) {
  .cc184-level2 .cc184-level-title {
    margin-bottom: 80px;
  }
  .cc184-level2__visual img {
    width: 100%;
  }
  .cc184-level2__features {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc184-level2__bottom-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .cc184-level2 {
    padding: 48px 16px 64px;
  }
  .cc184-level2__inner {
    padding: 10px;
  }
  .cc184-level2 .cc184-level-title {
    margin-bottom: 28px;
  }
  .cc184-level2__visual {
    margin: 0 auto 24px;
  }
  .cc184-level2__visual img {
    width: 90%;
    max-width: 520px;
    margin: 0 auto;
  }
  .cc184-level2__highlights {
    grid-template-columns: 1fr;
    margin-bottom: 28px;
  }
  .cc184-level2__highlight {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 18px 22px;
  }
  .cc184-level2__highlight:last-child {
    border-bottom: 0;
  }
  .cc184-level2__body-copy {
    margin-bottom: 30px;
  }
  .cc184-level2__features {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 36px;
  }
  .cc184-level2-card {
    min-height: auto;
    padding: 14px;
  }
  .cc184-level2-card__icon {
    height: 108px;
  }
  .cc184-level2__bottom-row {
    gap: 20px;
    margin-top: 30px;
  }
  .cc184-level2__comparison {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 56px 22px 24px;
  }
  .cc184-level2__comparison-badge {
    min-width: 0;
    width: calc(100% - 44px);
  }
  .cc184-level2__comparison-centre {
    height: 52px;
    margin-top: 0;
  }
  .cc184-level2__comparison-centre::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }
  .cc184-level2__comparison-arrow {
    transform: rotate(90deg);
  }
  .cc184-level2__offer {
    padding: 24px 22px;
  }
  .cc184-level2__offer a {
    width: 100%;
    text-align: center;
    padding: 15px 0;
  }
}
@media (max-width: 520px) {
  .cc184-level2__visual img {
    width: 100%;
  }
  .cc184-level2__features {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================
   CableCalc 18-4 – Level 3
   ========================================================== */
.cc184-level3 {
  background:
    radial-gradient(circle at 78% 34%, rgba(47, 107, 52, .16), transparent 30%), radial-gradient(circle at 18% 18%, rgba(215, 133, 39, .10), transparent 30%), linear-gradient(135deg, #2b261f 0%, #484333 48%, #24221c 100%);
  color: #fff;
  padding: 44px 20px 34px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.cc184-level3__inner {
  max-width: 1240px;
  margin: 0 auto;
}
/* ==========================================================
   Intro
   ========================================================== */
.cc184-level3__top {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 40px;
  align-items: center;
}
.cc184-level3 .cc184-level-title {
  margin: 0 0 28px;
}
.cc184-level3 .cc184-level-title h2 {
  margin: 0 0 16px;
  max-width: 520px;
  font-size: clamp(1.75rem, 2.55vw, 2.6rem);
  line-height: 1.04;
}
.cc184-level3 .cc184-level-title p {
  max-width: 520px;
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
}
.cc184-level3__copy > p {
  max-width: 540px;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .84);
  line-height: 1.42;
  text-align: left;
}
.cc184-level3__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.cc184-level3__list li {
  position: relative;
  margin: 9px 0;
  padding-left: 31px;
  font-size: .95rem;
  line-height: 1.3;
}
.cc184-level3__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid #ffad35;
  border-radius: 50%;
  color: #ffad35;
  font-size: .75rem;
  font-weight: 700;
}
/* ==========================================================
   Visual
   ========================================================== */
.cc184-level3__visual {
  position: relative;
  margin-top: 34px;
}
.cc184-level3__visual::before {
  content: "";
  position: absolute;
  inset: 10% 4% 8%;
  z-index: 0;
  background: radial-gradient(circle, rgba(47, 107, 52, .16) 0%, rgba(47, 107, 52, .06) 42%, transparent 72%);
  filter: blur(64px);
}
.cc184-level3__visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: 112%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, .45));
}
.cc184-level3__catalogue {
  position: absolute;
  left: 18px;
  top: -26px;
  z-index: 10;
  padding: 16px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #173d21, #268f3c);
  box-shadow: 0 0 24px rgba(60, 190, 90, .35);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}
/* ==========================================================
   Feature cards
   ========================================================== */
.cc184-level3__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.cc184-level3-card {
  min-height: 130px;
  padding: 22px 24px 20px;
  text-align: center;
  background: rgba(0, 0, 0, .16);
  border-right: 1px solid rgba(255, 255, 255, .16);
}
.cc184-level3-card:last-child {
  border-right: 0;
}
.cc184-level3-card__icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  color: #54d66b;
}
.cc184-level3-card__icon svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}
.cc184-level3-card h3 {
  margin: 0 0 8px;
  font-size: .92rem;
  line-height: 1.18;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cc184-level3-card p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
  line-height: 1.38;
}
/* ==========================================================
   Offer
   ========================================================== */
.cc184-level3__offer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  margin: 24px 0 0;
  padding: 18px 24px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
}
.cc184-level3__offer p {
  margin: 0;
  color: #ffb34d;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 700;
}
.cc184-level3__offer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  padding: 13px 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ff9d1f, #ff7200);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .25);
}
.cc184-level3__offer a span {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  opacity: .9;
}
/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:980px) {
  .cc184-level3__top {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .cc184-level3__visual {
    margin-top: 8px;
  }
  .cc184-level3__visual img {
    width: 100%;
  }
  .cc184-level3__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cc184-level3__offer {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin: 26px auto 0;
    text-align: center;
  }
}
@media (max-width:760px) {
  .cc184-level3 {
    padding: 48px 16px 64px;
  }
  .cc184-level3__inner {
    padding: 0 10px;
  }
  .cc184-level3 .cc184-level-title {
    margin-bottom: 22px;
  }
  .cc184-level3__visual img {
    width: 90%;
    max-width: 520px;
    margin: 0 auto;
  }
  .cc184-level3__catalogue {
    position: static;
    display: inline-block;
    margin-bottom: 14px;
  }
  .cc184-level3__catalogue img {
    display: block;
    max-width: 140px;
    margin: 6px auto;
  }
  .cc184-level3__cards {
    grid-template-columns: 1fr;
  }
  .cc184-level3-card {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .cc184-level3-card:last-child {
    border-bottom: 0;
  }
  .cc184-level3__offer {
    gap: 18px;
    padding: 22px;
  }
  .cc184-level3__offer a {
    min-width: 240px;
    max-width: 300px;
    width: auto;
    margin: 0 auto;
    padding: 14px 20px;
  }
  .cc184-level3__offer a span {
    font-size: .7rem;
  }
}
@media (max-width:520px) {
  .cc184-level3__visual img {
    width: 100%;
  }
}
/* =========================================================
   CableCalc BS7671 18-4 - Level 4
   ========================================================= */
.cc184-level4 {
  position: relative;
  overflow: hidden;
  padding: 40px 20px 95px;
  color: #fff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 140, 255, .20), transparent 28%), radial-gradient(circle at 50% 105%, rgba(0, 110, 255, .16), transparent 40%), radial-gradient(circle at -10% 50%, rgba(0, 90, 200, .08), transparent 35%), linear-gradient(135deg, #020305 0%, #030814 38%, #071324 68%, #020305 100%);
}
.cc184-level4::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  opacity: .55;
  pointer-events: none;
}
.cc184-level4__inner {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  gap: 44px;
}
/* Top layout */
.cc184-level4__top {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.cc184-level4__content {
  max-width: 620px;
  text-align: left;
}
.cc184-level4__intro {
  max-width: 540px;
  margin: 0 auto;
  color: #d5e1f3;
  font-size: 1rem;
  line-height: 1.7;
}
/* Visual */
.cc184-level4__visual {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: radial-gradient(ellipse, rgba(90, 150, 255, .12), transparent 70%);
}
.cc184-level4__visual::before {
  content: "";
  position: absolute;
  width: 780px;
  height: 430px;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 120, 255, .18), transparent 70%);
  filter: blur(45px);
  z-index: -1;
}
.cc184-level4__visual img {
  display: block;
  width: 110%;
  margin-left: -60px;
  margin-bottom: -50px;
  padding-top: 0px;
  filter: drop-shadow(0 55px 65px rgba(0, 0, 0, .55));
  z-index: -1;
}
/* Unlimited badge */
.cc184-level4__badge {
  position: absolute;
  top: 125px;
  right: 82px;
  z-index: 3;
  isolation: isolate;
  width: 108px;
  aspect-ratio: 1 / .9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-top: 8px;
  color: #fff;
  text-align: center;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow:
    0 0 28px rgba(80, 135, 255, .45), 0 14px 28px rgba(0, 0, 0, .35);
  transform: rotate(13deg);
}
.cc184-level4__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  clip-path: inherit;
  background: linear-gradient(145deg, rgba(145, 200, 255, .9), rgba(65, 110, 255, .35));
}
.cc184-level4__badge::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: inherit;
  background:
    radial-gradient(circle at 50% 18%, rgba(150, 185, 255, .5), transparent 34%), linear-gradient(145deg, #385ed8 0%, #1a2e7a 58%, #101b4d 100%);
}
.cc184-level4__badge svg {
  width: 56px;
  height: 48px;
  margin-top: -10px;
  margin-bottom: -6px;
  fill: none;
  stroke: #8ebaff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(120, 180, 255, .7));
}
.cc184-level4__badge span {
  margin-top: -2px;
  font-size: .70rem;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .015em;
}
/* Feature cards */
.cc184-level4__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: -60px;
}
.cc184-level4-feature {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid rgba(115, 170, 255, .16);
  border-radius: 16px;
  background: rgba(10, 28, 70, .32);
  box-shadow: inset 0 0 20px rgba(85, 135, 255, .045);
  transition:
    transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cc184-level4-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(120, 180, 255, .35);
  box-shadow:
    inset 0 0 22px rgba(95, 150, 255, .08), 0 12px 26px rgba(0, 0, 0, .25);
}
.cc184-level4-feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 155, 255, .5);
  border-radius: 11px;
  background: rgba(18, 42, 88, .48);
  color: #78adff;
  box-shadow: inset 0 0 18px rgba(80, 130, 255, .12);
}
.cc184-level4-feature__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level4-feature h3 {
  margin: 0 0 6px;
  color: #67a8ff;
  font-size: .86rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .075em;
}
.cc184-level4-feature p {
  margin: 0;
  color: #d0dcf0;
  font-size: .86rem;
  line-height: 1.45;
  text-align: left;
}
/* Pricing bar */
.cc184-level4__pricing {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr 1.4fr;
  gap: 26px;
  align-items: center;
  padding: 26px 34px;
  border: 1px solid rgba(110, 175, 255, .48);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 50%, rgba(85, 155, 255, .14), transparent 28%), linear-gradient(135deg, rgba(13, 30, 70, .88), rgba(8, 18, 44, .9));
  box-shadow:
    inset 0 0 30px rgba(95, 150, 255, .10), 0 20px 50px rgba(0, 0, 0, .3);
  backdrop-filter: blur(10px);
}
.cc184-level4__price {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  align-items: center;
  padding-right: 34px;
  border-right: 1px solid rgba(120, 175, 255, .18);
}
.cc184-level4__price-icon {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(145, 210, 255, .75);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 180, 255, .20) 0%, rgba(60, 110, 255, .10) 45%, transparent 70%);
  color: #fff;
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1;
  box-shadow:
    0 0 10px rgba(90, 170, 255, .35), 0 0 28px rgba(80, 150, 255, .28), inset 0 0 22px rgba(130, 200, 255, .18);
}
.cc184-level4__price-icon::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(90, 170, 255, .30) 0%, rgba(90, 170, 255, .11) 45%, transparent 72%);
}
.cc184-level4__price span:not(.cc184-level4__price-icon), .cc184-level4__price small {
  display: block;
  color: #cbd8ec;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .72rem;
  font-weight: 700;
}
.cc184-level4__price strong {
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -.05em;
  text-shadow: 0 0 12px rgba(255, 255, 255, .18);
}
.cc184-level4__price em {
  color: #b9c9df;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 500;
}
.cc184-level4__price small {
  margin-top: 8px;
  color: #d5dfef;
  font-size: .76rem;
  line-height: 1.45;
}
.cc184-level4__price small strong {
  color: #79b4ff;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: inherit;
  text-shadow: 0 0 10px rgba(80, 160, 255, .35);
}
.cc184-level4__benefit {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  color: #d6eaff;
}
.cc184-level4__benefit > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(120, 185, 255, .68);
  border-radius: 50%;
  color: #86b8ff;
  box-shadow: 0 0 14px rgba(95, 160, 255, .22);
}
.cc184-level4__benefit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc184-level4__benefit strong {
  display: block;
  margin-bottom: 5px;
  color: #83b5ff;
  font-size: .88rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.cc184-level4__benefit p {
  margin: 0;
  color: #c9d5e7;
  font-size: .84rem;
  line-height: 1.45;
}
.cc184-level4__action {
  text-align: center;
}
.cc184-level4__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 80%;
  min-height: 58px;
  padding: 0 30px;
  border-radius: 12px;
  background: linear-gradient(180deg, #78a9ff 0%, #4a73e8 100%);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .055em;
  box-shadow:
    0 16px 34px rgba(65, 105, 230, .38), inset 0 1px 0 rgba(255, 255, 255, .32);
  transition:
    transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.cc184-level4__cta span {
  font-size: 1.45rem;
  line-height: 1;
}
.cc184-level4__cta:hover {
  background: linear-gradient(180deg, #8bb7ff 0%, #587df0 100%);
  transform: translateY(-2px);
  box-shadow:
    0 24px 44px rgba(75, 125, 255, .48), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* Responsive */
@media (max-width: 980px) {
  .cc184-level4__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cc184-level4__content {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
  }
  .cc184-level4__visual {
    min-height: auto;
    justify-content: center;
  }
  .cc184-level4__visual img {
    width: 110%;
    max-width: 940px;
    margin-left: 0;
  }
  .cc184-level4__features {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
    text-align: left;
  }
  .cc184-level4__pricing {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .cc184-level4__price, .cc184-level4__action {
    grid-column: 1 / -1;
  }
  .cc184-level4__price {
    border-right: 0;
    padding-right: 0;
  }
}
@media (max-width: 760px) {
  .cc184-level4 {
    padding: 48px 16px 64px;
  }
  .cc184-level4__inner {
    padding: 0;
  }
  .cc184-level4 .cc184-level-title {
    margin-bottom: 22px;
  }
  .cc184-level4__intro {
    font-size: 1rem;
    line-height: 1.45;
  }
  .cc184-level4__badge {
    top: 0;
    right: 0;
    transform: scale(.82) rotate(13deg);
    transform-origin: top right;
  }
  .cc184-level4__features {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cc184-level4-feature {
    min-height: auto;
  }
  .cc184-level4__pricing {
    gap: 14px;
    padding: 18px;
  }
  .cc184-level4__price {
    grid-template-columns: 56px 1fr;
  }
  .cc184-level4__price-icon {
    width: 52px;
    height: 52px;
    font-size: 2rem;
  }
  .cc184-level4__price strong {
    font-size: 2.2rem;
  }
  .cc184-level4__action {
    text-align: center;
  }
  .cc184-level4__cta {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 520px) {
  .cc184-level4__visual img {
    width: 100%;
  }
  .cc184-level4__badge {
    top: 0;
    right: 0;
    transform: none;
  }
}
/* ============================================================
   CableCalc 18-4 — Level Comparison
   ============================================================ */
#comparison.cc184-comparison, #comparison.cc184-comparison * {
  box-sizing: border-box;
}
#comparison.cc184-comparison {
  margin: 0 auto;
  padding: 54px 20px 58px;
  background: radial-gradient(circle at top, #10233a 0%, #06111f 52%, #03070d 100%);
  color: #ffffff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  text-align: center;
}
.cc184-comparison__inner {
  max-width: 1420px;
  margin: 0 auto;
}
/* ============================================================
   Header
   ============================================================ */
.cc184-comparison__header {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 36px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: center;
}
.cc184-comparison__header::before, .cc184-comparison__header::after {
  display: none;
  content: none;
}
.cc184-comparison .cc184-section-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #eef3fb;
  color: #213955;
  box-shadow: none;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cc184-comparison__header h2 {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: #ffffff;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 3vw, 3rem);
  font-style: normal;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.8px;
  text-align: center;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  text-transform: none;
}
.cc184-comparison__header p {
  display: block;
  position: static;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
}
/* ============================================================
   Main panel
   ============================================================ */
.cc184-comparison__panel {
  position: relative;
  display: grid;
  grid-template-columns: 185px minmax(0, 1fr);
  margin-top: 100px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 30px 75px rgba(0, 0, 0, 0.42);
}
/* ============================================================
   Cable tray
   ============================================================ */
.cc184-comparison__cables {
  position: relative;
  display: flex;
  min-height: 100%;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)), url("../images/backgrounds/cablecalc_comparison_background_long.jpg");
  background-position: center top;
  background-size: 100% auto;
  background-repeat: round;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.cc184-comparison__cables::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 70px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cc184-cable {
  position: relative;
  width: 48px;
  min-height: 900px;
  align-self: flex-start;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55));
}
.cc184-cable::before {
  z-index: 1;
}
.cc184-cable::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 36px;
  height: 30%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cc184-cable img {
  position: absolute;
  z-index: 2;
  top: calc(var(--cable-length) - var(--wire-overlap));
  left: 0;
  width: 36px;
  height: auto;
  transform: none;
}
.cc184-cable--l1::before, .cc184-cable--l2::before, .cc184-cable--l3::before, .cc184-cable--l4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: var(--cable-length);
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
}
.cc184-cable--l1::before {
  background: url("../images/cablecalc/brown_wire_vertical.png") center top / 36px auto repeat-y;
}
.cc184-cable--l2::before {
  background: url("../images/cablecalc/black_wire_vertical.png") center top / 36px auto repeat-y;
}
.cc184-cable--l3::before {
  background: url("../images/cablecalc/grey_wire_vertical.png") center top / 36px auto repeat-y;
}
.cc184-cable--l4::before {
  background: url("../images/cablecalc/blue_wire_vertical.png") center top / 36px auto repeat-y;
}
:root {
  --wire-tip-height: 108px;
  --wire-overlap: 5px;
}
.cc184-cable--l1 {
  --cable-length: calc(51% - (var(--wire-tip-height) - var(--wire-overlap)));
}
.cc184-cable--l2 {
  --cable-length: calc(75% - (var(--wire-tip-height) - var(--wire-overlap)));
}
.cc184-cable--l3 {
  --cable-length: calc(88% - (var(--wire-tip-height) - var(--wire-overlap)));
}
.cc184-cable--l4 {
  --cable-length: calc(99% - (var(--wire-tip-height) - var(--wire-overlap)));
}
/* ============================================================
   Comparison table
   ============================================================ */
.cc184-comparison__table-wrap {
  overflow-x: auto;
  scrollbar-color: #ff7a00 rgba(255, 255, 255, 0.1);
}
.cc184-comparison-table {
  width: 100%;
  min-width: 860px;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  color: #ffffff;
}
.cc184-comparison-table caption {
  position: absolute;
  left: -9999px;
}
.cc184-comparison-table th, .cc184-comparison-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
.cc184-comparison-table thead th {
  padding: 18px 16px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
}
.cc184-comparison-table thead th span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.cc184-comparison-table .feature-col {
  min-width: 350px;
  background: linear-gradient(180deg, #171d24, #080e16);
  font-size: 1.2em;
  text-align: left;
}
.cc184-comparison-table .level-col {
  min-width: 125px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.cc184-comparison-table .level-1 {
  background: linear-gradient(180deg, #bd8247, #7e4b22);
}
.cc184-comparison-table .level-2 {
  background: linear-gradient(180deg, #777777, #3e3e3e);
}
.cc184-comparison-table .level-3 {
  background: linear-gradient(180deg, #9b9b9b, #555555);
}
.cc184-comparison-table .level-4 {
  background: linear-gradient(180deg, #15558f, #092f55);
}
.cc184-comparison-table tbody td {
  padding: 2px 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  line-height: 1.18;
  text-align: center;
}
.cc184-comparison-table tbody td:first-child {
  padding-top: 4px;
  padding-bottom: 4px;
  color: #f4f4f4;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}
.cc184-comparison-table tbody td:nth-child(2) {
  background: rgba(123, 82, 45, 0.50);
}
.cc184-comparison-table tbody td:nth-child(3) {
  background: rgba(48, 48, 48, 0.58);
}
.cc184-comparison-table tbody td:nth-child(4) {
  background: rgba(120, 120, 120, 0.55);
}
.cc184-comparison-table tbody td:nth-child(5) {
  background: rgba(40, 98, 170, 0.58);
}
.cc184-comparison-table td.no {
  filter: brightness(75%);
  background-image: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
}
.cc184-comparison-table tbody tr:hover td {
  background: rgba(33, 46, 61, 1);
}
/* ============================================================
   Included / not included indicators
   ============================================================ */
.yes::before, .legend-check::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  color: #ffffff;
  vertical-align: middle;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.3 16.6 4.9 12.2l1.4-1.4 3 3 8.4-8.4 1.4 1.4-9.8 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.3 16.6 4.9 12.2l1.4-1.4 3 3 8.4-8.4 1.4 1.4-9.8 9.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.yes::after, .legend-check::after {
  content: none;
}
.no::before, .legend-dash::before {
  content: "–";
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  font-weight: 700;
}
/* ============================================================
   Feature icons
   Keep the individual .icon-* mask rules after this block.
   ============================================================ */
.feature-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: currentColor;
  color: #ffffff;
  opacity: 0.85;
  vertical-align: -4px;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
/* Text-based phase icons avoid missing-glyph squares. */
#comparison.cc184-comparison .icon-single-phase, #comparison.cc184-comparison .icon-three-phase {
  position: relative;
  width: 18px;
  height: 18px;
  background: none;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: -4px;
  opacity: 0.9;
  mask: none;
  -webkit-mask: none;
}
#comparison.cc184-comparison .icon-single-phase::before {
  content: "1\00D8";
}
#comparison.cc184-comparison .icon-three-phase::before {
  content: "3\00D8";
}
/* ============================================================
   Legend
   ============================================================ */
.cc184-comparison__legend {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
}
.cc184-comparison__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* ============================================================
   Tablet
   ============================================================ */
@media screen and (max-width: 900px) {
  #comparison.cc184-comparison {
    padding: 58px 14px;
  }
  /*
     * Force the heading and paragraph into normal document flow
     * so the table cannot rise behind them.
     */
  #comparison.cc184-comparison .cc184-comparison__header {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 760px;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 34px;
    padding: 0 16px;
  }
  #comparison.cc184-comparison .cc184-comparison__header h2 {
    position: static;
    width: 100%;
    margin: 0 0 12px;
    font-size: clamp(1.9rem, 5vw, 2.35rem);
    line-height: 1.1;
  }
  #comparison.cc184-comparison .cc184-comparison__header p {
    display: block;
    position: static;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 0;
    font-size: 0.94rem;
    line-height: 1.5;
    text-align: center;
  }
  #comparison.cc184-comparison .cc184-comparison__panel {
    display: block;
    grid-template-columns: none;
    margin-top: 0;
    border-radius: 12px;
  }
  #comparison.cc184-comparison .cc184-comparison__cables {
    display: none;
  }
  #comparison.cc184-comparison .cc184-comparison__table-wrap {
    width: 100%;
    overflow-x: visible;
  }
  #comparison.cc184-comparison .cc184-comparison-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .cc184-comparison-table .feature-col {
    width: 52%;
    min-width: 0;
  }
  .cc184-comparison-table .level-col {
    width: 12%;
    min-width: 0;
  }
  .cc184-comparison-table thead th {
    padding: 14px 6px;
    font-size: 0.76rem;
    line-height: 1.15;
    letter-spacing: 0;
  }
  .cc184-comparison-table thead th span {
    margin-top: 3px;
    font-size: 0.54rem;
    line-height: 1.2;
    letter-spacing: 0.4px;
  }
  .cc184-comparison-table tbody td {
    padding: 6px 5px;
    font-size: 0.66rem;
    line-height: 1.25;
  }
  .cc184-comparison-table tbody td:first-child {
    padding: 6px 8px;
    overflow-wrap: anywhere;
  }
  .yes::before, .legend-check::before {
    width: 16px;
    height: 16px;
  }
  .cc184-comparison__legend {
    gap: 24px;
    margin-top: 20px;
    font-size: 0.8rem;
  }
}
/* ============================================================
   Mobile
   ============================================================ */
@media screen and (max-width: 550px) {
  #comparison.cc184-comparison {
    padding: 46px 8px 48px;
  }
  #comparison.cc184-comparison .cc184-comparison__header {
    display: flex;
    position: relative;
    height: auto;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 34px;
    padding: 0 10px;
  }
  .cc184-comparison .cc184-section-tag {
    margin-bottom: 11px;
    padding: 6px 14px;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
  }
  #comparison.cc184-comparison .cc184-comparison__header h2 {
    position: static;
    margin: 0 0 12px;
    font-size: 1.8rem;
    line-height: 1.08;
  }
  #comparison.cc184-comparison .cc184-comparison__header p {
    display: block;
    position: static;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    text-align: center;
  }
  #comparison.cc184-comparison .cc184-comparison__panel {
    margin-top: 0;
    border-radius: 9px;
  }
  #comparison.cc184-comparison .cc184-comparison-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  #comparison.cc184-comparison .cc184-comparison-table .feature-col {
    width: 57%;
    min-width: 0;
  }
  #comparison.cc184-comparison .cc184-comparison-table .level-col {
    width: 10.75%;
    min-width: 0;
  }
  .cc184-comparison-table thead th {
    height: 60px;
    padding: 8px 2px;
    font-size: 0.63rem;
    line-height: 1.12;
    letter-spacing: 0;
    word-break: normal;
  }
  .cc184-comparison-table thead th:first-child {
    padding-left: 9px;
    font-size: 0.78rem;
  }
  .cc184-comparison-table thead th span {
    display: none;
  }
  #comparison.cc184-comparison .cc184-comparison-table tbody td {
    height: 35px;
    padding: 6px 2px;
    font-size: 0.59rem;
    line-height: 1.2;
  }
  #comparison.cc184-comparison .cc184-comparison-table tbody td:first-child {
    padding: 6px;
    font-size: 0.57rem;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: normal;
    word-break: normal;
  }
  #comparison.cc184-comparison .feature-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 6px 0 0;
    vertical-align: -3px;
    flex: 0 0 14px;
  }
  #comparison.cc184-comparison .icon-single-phase, #comparison.cc184-comparison .icon-three-phase {
    width: 14px;
    height: 14px;
    font-size: 8px;
    line-height: 14px;
    vertical-align: -3px;
    flex-basis: 14px;
  }
  .yes::before, .legend-check::before {
    width: 14px;
    height: 14px;
  }
  .no::before, .legend-dash::before {
    font-size: 0.85rem;
  }
  .cc184-comparison__legend {
    gap: 20px;
    margin-top: 18px;
    font-size: 0.72rem;
  }
}
/* ============================================================
   Very small screens
   ============================================================ */
@media screen and (max-width: 380px) {
  #comparison.cc184-comparison {
    padding-right: 5px;
    padding-left: 5px;
  }
  #comparison.cc184-comparison .cc184-comparison-table .feature-col {
    width: 58%;
  }
  #comparison.cc184-comparison .cc184-comparison-table .level-col {
    width: 10.5%;
  }
  .cc184-comparison-table thead th {
    padding-right: 1px;
    padding-left: 1px;
    font-size: 0.57rem;
  }
  #comparison.cc184-comparison .cc184-comparison-table tbody td {
    font-size: 0.55rem;
  }
  #comparison.cc184-comparison .cc184-comparison-table tbody td:first-child {
    padding-right: 4px;
    padding-left: 5px;
    font-size: 0.55rem;
  }
}
/* Level comparrison Icon Set */
/* Twin & Earth cable - flat twin profile with CPC */
.icon-twin-earth {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Zm1 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm12 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-6 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Zm1 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm12 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-6 1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E");
}
/* Full range of cables - grouped cable ends */
.icon-cable-group {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4a5 5 0 1 0 0 10A5 5 0 0 0 7 4Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm10-2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM15 14a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4a5 5 0 1 0 0 10A5 5 0 0 0 7 4Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm10-2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM15 14a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
}
/* Lighting circuit - clearer bulb */
.icon-light-bulb {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.75V17h8v-2.25A7 7 0 0 0 12 2Zm-3 17h6v2H9v-2Zm1-10a2 2 0 0 1 4 0h2a4 4 0 0 0-8 0h2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.75V17h8v-2.25A7 7 0 0 0 12 2Zm-3 17h6v2H9v-2Zm1-10a2 2 0 0 1 4 0h2a4 4 0 0 0-8 0h2Z'/%3E%3C/svg%3E");
}
/* Feature icons */
.feature-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  color: #ffffff;
  background: currentColor;
  opacity: .9;
  vertical-align: -4px;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.icon-print {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v5H7V3Zm-3 7h16a2 2 0 0 1 2 2v6h-4v3H6v-3H2v-6a2 2 0 0 1 2-2Zm4 6v3h8v-3H8Zm11-3a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 3h10v5H7V3Zm-3 7h16a2 2 0 0 1 2 2v6h-4v3H6v-3H2v-6a2 2 0 0 1 2-2Zm4 6v3h8v-3H8Zm11-3a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
}
.icon-logo {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4V5Zm2 2v10h12V7H6Zm2 8 2.3-3 1.7 2.1 2.2-3.1L17 15H8Zm1.8-6.7a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4V5Zm2 2v10h12V7H6Zm2 8 2.3-3 1.7 2.1 2.2-3.1L17 15H8Zm1.8-6.7a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8Z'/%3E%3C/svg%3E");
}
.icon-pdf, .icon-report, .icon-schedule {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h10l4 4v14H5V3Zm9 1.5V8h3.5L14 4.5ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3h10l4 4v14H5V3Zm9 1.5V8h3.5L14 4.5ZM8 11h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}
.icon-cpc {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8V3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8V3Z'/%3E%3C/svg%3E");
}
.icon-single-phase {
  mask-image: none;
  -webkit-mask-image: none;
  background: none;
  width: 24px;
}
.icon--single-phase {
  font-family: Arial, sans-serif;
  font-weight: 500; /* was 700 */
}
.icon-single-phase::before {
  content: "1 Ø";
  color: currentColor;
  font-size: .90rem;
  font-weight: 400;
  letter-spacing: -1px;
}
.icon-graph, .icon-discrimination {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h17v2H2V4h2v15Zm2-2 4-6 3 3 5-8 2 1.2-6.7 10.5-3-3L8 18l-2-1Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19h17v2H2V4h2v15Zm2-2 4-6 3 3 5-8 2 1.2-6.7 10.5-3-3L8 18l-2-1Z'/%3E%3C/svg%3E");
}
.icon-twin-earth {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h14a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3Zm1 2.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm12 0a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm-6 1.2a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7h14a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-4a3 3 0 0 1 3-3Zm1 2.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm12 0a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm-6 1.2a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Z'/%3E%3C/svg%3E");
}
/* Ring circuit - line into side of square */
/* Ring final circuit - loop with outlets and consumer unit */
.icon-ring {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14v11H5V6Zm2 2v7h10V8H7Z'/%3E%3Cpath d='M3 11h4v3H3v-3Zm14-1h4v3h-4v-3ZM9 4h3v3H9V4Zm13 0v3h-3V4h3ZM9 16h3v3H9v-3Zm4 0h3v3h-3v-3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14v11H5V6Zm2 2v7h10V8H7Z'/%3E%3Cpath d='M3 11h4v3H3v-3Zm14-1h4v3h-4v-3ZM9 4h3v3H9V4Zm13 0v3h-3V4h3ZM9 16h3v3H9v-3Zm4 0h3v3h-3v-3Z'/%3E%3C/svg%3E");
}
/* Radial circuit */
.icon-radial {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h8M11 12V7M11 12v5M11 7h8M11 17h8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='19' cy='7' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='17' r='1.2' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h8M11 12V7M11 12v5M11 7h8M11 17h8' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='19' cy='7' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='1.2' fill='black'/%3E%3Ccircle cx='19' cy='17' r='1.2' fill='black'/%3E%3C/svg%3E");
}
.icon-three-phase {
  mask-image: none;
  -webkit-mask-image: none;
  background: none;
  width: 24px;
}
.icon-threephase {
  font-family: Arial, sans-serif;
  font-weight: 500; /* was 700 */
}
.icon-three-phase::before {
  content: "3 Ø";
  color: currentColor;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: -1px;
}
.icon-cable-group {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4a5 5 0 1 0 0 10A5 5 0 0 0 7 4Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm10-1a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4a5 5 0 1 0 0 10A5 5 0 0 0 7 4Zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm10-1a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 2.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-2 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm0 2.3a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E");
}
/* Fire resistant cable */
.icon-fire {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.4 2.2 3.4 4.2 3.4 7.2 1.1-.7 2-2 2.3-3.3C19.8 7.8 21 10 21 13.1 21 18 17.1 22 12 22S3 18.2 3 13.3c0-3.8 2.1-6.8 5.2-9.1-.4 2.2.1 3.9 1.4 5.2C10.1 6.6 10.9 4.3 12 2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1.4 2.2 3.4 4.2 3.4 7.2 1.1-.7 2-2 2.3-3.3C19.8 7.8 21 10 21 13.1 21 18 17.1 22 12 22S3 18.2 3 13.3c0-3.8 2.1-6.8 5.2-9.1-.4 2.2.1 3.9 1.4 5.2C10.1 6.6 10.9 4.3 12 2Z'/%3E%3C/svg%3E");
}
.icon-flex, .icon-rubber, .icon-aluminium {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5a3 3 0 0 0 0 6h8a1 1 0 1 1 0 2h-4a3 3 0 1 0 0 6h8v-2h-8a1 1 0 1 1 0-2h4a3 3 0 1 0 0-6H6a1 1 0 0 1 0-2h8V5H6Zm12-1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5a3 3 0 0 0 0 6h8a1 1 0 1 1 0 2h-4a3 3 0 1 0 0 6h8v-2h-8a1 1 0 1 1 0-2h4a3 3 0 1 0 0-6H6a1 1 0 0 1 0-2h8V5H6Zm12-1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}
.icon-light-bulb {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3h-2V2Zm7.1 2.5 1.4 1.4-2.1 2.1L16 6.6l2.1-2.1ZM4.5 5.9l1.4-1.4L8 6.6 6.6 8 4.5 5.9ZM12 7a5.5 5.5 0 0 1 3 10.1V19H9v-1.9A5.5 5.5 0 0 1 12 7Zm-3 14h6v1H9v-1Zm-6-9h3v2H3v-2Zm15 0h3v2h-3v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2h2v3h-2V2Zm7.1 2.5 1.4 1.4-2.1 2.1L16 6.6l2.1-2.1ZM4.5 5.9l1.4-1.4L8 6.6 6.6 8 4.5 5.9ZM12 7a5.5 5.5 0 0 1 3 10.1V19H9v-1.9A5.5 5.5 0 0 1 12 7Zm-3 14h6v1H9v-1Zm-6-9h3v2H3v-2Zm15 0h3v2h-3v-2Z'/%3E%3C/svg%3E");
}
/* Sub-main circuit - large incoming cable into DB */
.icon-submain {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11h8v2H2zM10 10l2 2-2 2zM13 5h8v14h-8zM15 8h2v2h-2zM18 8h2v2h-2zM15 11h2v2h-2zM18 11h2v2h-2zM15 14h2v2h-2zM18 14h2v2h-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 11h8v2H2zM10 10l2 2-2 2zM13 5h8v14h-8zM15 8h2v2h-2zM18 8h2v2h-2zM15 11h2v2h-2zM18 11h2v2h-2zM15 14h2v2h-2zM18 14h2v2h-2z'/%3E%3C/svg%3E");
}
/* Star (Y) motor connection */
.icon-star {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cpath d='M12 12V3M12 12L5 18M12 12l7 6' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='3' r='1.2'/%3E%3Ccircle cx='5' cy='18' r='1.2'/%3E%3Ccircle cx='19' cy='18' r='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cpath d='M12 12V3M12 12L5 18M12 12l7 6' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='12' cy='3' r='1.2'/%3E%3Ccircle cx='5' cy='18' r='1.2'/%3E%3Ccircle cx='19' cy='18' r='1.2'/%3E%3C/svg%3E");
}
/* DOL motor */
.icon-dol {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ctext x='12' y='15' text-anchor='middle' font-family='Arial' font-size='7' font-weight='700'%3EM%3C/text%3E%3Cpath d='M2 12h4M18 12h4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ctext x='12' y='15' text-anchor='middle' font-family='Arial' font-size='7' font-weight='700'%3EM%3C/text%3E%3Cpath d='M2 12h4M18 12h4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.icon-project {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7h7v10H2V7Zm13 0h7v10h-7V7ZM5 10h1v1H5Zm0 3h1v1H5Zm3-3h1v1H8Zm0 3h1v1H8Zm10-3h1v1h-1Zm0 3h1v1h-1Zm3-3h1v1h-1Zm0 3h1v1h-1ZM9 12h6v1H9z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7h7v10H2V7Zm13 0h7v10h-7V7ZM5 10h1v1H5Zm0 3h1v1H5Zm3-3h1v1H8Zm0 3h1v1H8Zm10-3h1v1h-1Zm0 3h1v1h-1Zm3-3h1v1h-1Zm0 3h1v1h-1ZM9 12h6v1H9z'/%3E%3C/svg%3E");
}
.icon-dbdiagram {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4Zm3 3h4v3H7V7Zm6 0h4v3h-4V7ZM7 12h4v5H7v-5Zm6 0h4v5h-4v-5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4V4Zm3 3h4v3H7V7Zm6 0h4v3h-4V7ZM7 12h4v5H7v-5Zm6 0h4v5h-4v-5Z'/%3E%3C/svg%3E");
}
.icon-schematic {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v4M12 7H6v5M12 7h6v5M6 12v5M18 12v5M6 17h12' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='6' cy='17' r='1.2'/%3E%3Ccircle cx='18' cy='17' r='1.2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v4M12 7H6v5M12 7h6v5M6 12v5M18 12v5M6 17h12' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='6' cy='17' r='1.2'/%3E%3Ccircle cx='18' cy='17' r='1.2'/%3E%3C/svg%3E");
}
.icon-unlimiteddb {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h8v14H2V5Zm2 3h1v1H4Zm3 0h1v1H7Zm-3 3h1v1H4Zm3 0h1v1H7Zm8-3c1.5-1.5 3.5-1.5 5 0 1.5 1.5 1.5 3.5 0 5-1.5 1.5-3.5 1.5-5 0-1.5-1.5-1.5-3.5 0-5Zm2.5 1.2c-.8-.8-1.8-.8-2.6 0-.8.8-.8 1.8 0 2.6.8.8 1.8.8 2.6 0 .8-.8.8-1.8 0-2.6Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h8v14H2V5Zm2 3h1v1H4Zm3 0h1v1H7Zm-3 3h1v1H4Zm3 0h1v1H7Zm8-3c1.5-1.5 3.5-1.5 5 0 1.5 1.5 1.5 3.5 0 5-1.5 1.5-3.5 1.5-5 0-1.5-1.5-1.5-3.5 0-5Zm2.5 1.2c-.8-.8-1.8-.8-2.6 0-.8.8-.8 1.8 0 2.6.8.8 1.8.8 2.6 0 .8-.8.8-1.8 0-2.6Z'/%3E%3C/svg%3E");
}
/* Manufacturer protective devices */
.icon-device {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v6c0 5.2-3.3 8.7-8 11-4.7-2.3-8-5.8-8-11V5l8-3Zm0 3.2L6 7v4c0 3.8 2.2 6.5 6 8.5 3.8-2 6-4.7 6-8.5V7l-6-1.8Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v6c0 5.2-3.3 8.7-8 11-4.7-2.3-8-5.8-8-11V5l8-3Zm0 3.2L6 7v4c0 3.8 2.2 6.5 6 8.5 3.8-2 6-4.7 6-8.5V7l-6-1.8Z'/%3E%3C/svg%3E");
}
/* Single line diagram */
.icon-diagram {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h6v2H7v2h7v14h-2v-3H7v-2h5v-2H7v-2h5v-2H7V8H5V3Zm9 6h5v2h-5V9Zm0 4h5v2h-5v-2Zm0 4h5v2h-5v-2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h6v2H7v2h7v14h-2v-3H7v-2h5v-2H7v-2h5v-2H7V8H5V3Zm9 6h5v2h-5V9Zm0 4h5v2h-5v-2Zm0 4h5v2h-5v-2Z'/%3E%3C/svg%3E");
}
.icon-db20 {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v7H3V3Zm1 1v5h5V4H4Zm10-1h7v7h-7V3Zm1 1v5h5V4h-5ZM3 14h7v7H3v-7Zm1 1v5h5v-5H4Zm10-1h7v7h-7v-7Zm1 1v5h5v-5h-5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v7H3V3Zm1 1v5h5V4H4Zm10-1h7v7h-7V3Zm1 1v5h5V4h-5ZM3 14h7v7H3v-7Zm1 1v5h5v-5H4Zm10-1h7v7h-7v-7Zm1 1v5h5v-5h-5Z'/%3E%3C/svg%3E");
}
.icon-userdevice {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 5 5v6c0 5 3.4 8.8 7 11 3.6-2.2 7-6 7-11V5l-7-3Zm0 6.2.8.3.4.8-.3.8.6.6.8-.3.8.4.3.8-.8.5v.8l.8.5-.3.8-.8.4-.8-.3-.6.6.3.8-.4.8-.8.3-.5-.8h-.8l-.5.8-.8-.3-.4-.8.3-.8-.6-.6-.8.3-.8-.4-.3-.8.8-.5v-.8l-.8-.5.3-.8.8-.4.8.3.6-.6-.3-.8.4-.8.8-.3.5.8h.8l.5-.8Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 5 5v6c0 5 3.4 8.8 7 11 3.6-2.2 7-6 7-11V5l-7-3Zm0 6.2.8.3.4.8-.3.8.6.6.8-.3.8.4.3.8-.8.5v.8l.8.5-.3.8-.8.4-.8-.3-.6.6.3.8-.4.8-.8.3-.5-.8h-.8l-.5.8-.8-.3-.4-.8.3-.8-.6-.6-.8.3-.8-.4-.3-.8.8-.5v-.8l-.8-.5.3-.8.8-.4.8.3.6-.6-.3-.8.4-.8.8-.3.5.8h.8l.5-.8Z'/%3E%3C/svg%3E");
}
/*-------------------------------------------------------------------------------- CableCalc iPad ------------------------------------------------------------------------------------*/
#cablecalc_ipad {
  position: relative;
  overflow: hidden;
  padding: 55px 20px;
  background:
    radial-gradient(circle at 82% 28%, rgba(0, 150, 160, 0.28), transparent 34%), radial-gradient(circle at 15% 85%, rgba(255, 110, 0, 0.10), transparent 28%), linear-gradient(135deg, #00191c 0%, #00363b 48%, #001114 100%);
}
#cablecalc_ipad .main_content {
  max-width: 1600px;
  margin: 0 auto;
}
.cc-ipad-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1.1fr);
  gap: 50px;
  align-items: center;
  padding: 45px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  background: rgba(0, 20, 24, 0.45);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  text-align: left;
}
.cc-ipad-kicker {
  margin-bottom: 20px;
  color: #ff7a00;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
#cablecalc_ipad h2 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, .45), 0 0 2px rgba(255, 255, 255, .1);
}
.cc-ipad-intro {
  max-width: 760px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.65;
}
.cc-ipad-features {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}
.cc-ipad-feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}
.cc-ipad-feature img, .cc-ipad-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ff7a00, #e34018);
  box-shadow: 0 10px 25px rgba(255, 105, 0, 0.28);
  margin-top: 5px;
}
.cc-ipad-feature img {
  padding: 8px;
  box-sizing: border-box;
}
.cc-ipad-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
}
#cablecalc_ipad h3 {
  margin: 0 0 5px;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #75dce3;
}
#cablecalc_ipad p {
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}
.cc-ipad-feature p {
  margin: 0;
  line-height: 1.5;
}
.cc-ipad-cable-types {
  margin: 26px 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 122, 0, 0.55);
}
.cc-ipad-cable-types p {
  max-width: 680px;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.cc-ipad-visual {
  position: relative;
  text-align: center;
}
#ios_logo {
  position: absolute;
  top: -18px;
  right: 10px;
  width: 50px;
  opacity: 0.9;
}
#cablecalc_ipad_image {
  width: min(100%, 1020px);
  margin: 35px auto 0;
  display: block;
  filter: drop-shadow(0 28px 25px rgba(0, 0, 0, 0.45));
}
#cablecalc_ipad img.app_store {
  width: 145px;
  height: auto;
  float: none;
  margin-top: 4px;
}
@media screen and (max-width: 1000px) {
  .cc-ipad-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 35px 28px;
  }
  .cc-ipad-visual {
    order: -1;
  }
  #ios_logo {
    position: static;
    display: block;
    margin: 0 0 10px auto;
  }
  #cablecalc_ipad_image {
    max-width: 680px;
    margin-top: 10px;
  }
}
@media screen and (max-width: 600px) {
  #cablecalc_ipad {
    padding: 30px 12px;
  }
  .cc-ipad-card {
    padding: 24px 18px;
    border-radius: 14px;
  }
  #cablecalc_ipad h2 {
    letter-spacing: 2px;
  }
  .cc-ipad-feature {
    grid-template-columns: 46px 1fr;
    gap: 14px;
  }
  .cc-ipad-feature img, .cc-ipad-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1.6rem;
  }
  #cablecalc_ipad_image {
    width: 112%;
    max-width: none;
    margin-left: -6%;
  }
}
.cc-ipad-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: linear-gradient(135deg, #ff7a00, #e34018);
  box-shadow: 0 10px 25px rgba(255, 105, 0, 0.28);
  flex-shrink: 0;
}
.cc-ipad-svg-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-ipad-svg-icon rect, .cc-ipad-svg-icon path {
  vector-effect: non-scaling-stroke;
}
.cc-ipad-cable-types ul {
  margin: 15px 0 0;
  padding-left: 1.4rem;
  font-size: .94rem;
  line-height: 1.55;
}
.cc-ipad-cable-types li {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
}
.cc-ipad-cable-types li::marker {
  color: #ff7a00;
  font-size: 1.2em;
}
.cc-ipad-visual {
  position: relative;
  z-index: 1;
}
.cc-ipad-visual::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  right: 20px;
  top: 45%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 190, 210, 0.28) 0%, rgba(0, 140, 160, 0.14) 38%, rgba(0, 80, 90, 0.04) 62%, transparent 78%);
  filter: blur(35px);
  z-index: 0;
  pointer-events: none;
}
#cablecalc_ipad_image {
  position: relative;
  z-index: 2;
}
.cc-ipad-store-link {
  display: inline-block;
  margin-top: -100px;
  transform: translateX(-20px);
}
#cablecalc_ipad img.app_store {
  width: 170px;
  height: auto;
  float: none;
  opacity: 0.95;
}
/*--------------------------------------------------------------------------------
    Trust Strip
--------------------------------------------------------------------------------*/
#seo-trust-tile, .seo-trust-tile {
  position: relative;
  padding: 72px 20px 64px;
  background:
    radial-gradient(circle at 50% 4%, rgba(0, 120, 120, .20), transparent 34%), radial-gradient(circle at 50% 88%, rgba(255, 122, 0, .055), transparent 38%), linear-gradient(180deg, #1f2730 0%, #151c23 100%);
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  overflow: hidden;
}
.seo-trust-content {
  max-width: 1320px;
  margin: 0 auto;
  padding: 42px 50px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 4px solid #ff7a00;
  background:
    linear-gradient(145deg, rgba(46, 55, 65, .96), rgba(27, 34, 42, .98));
  box-shadow:
    0 34px 82px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.seo-trust-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, .82fr);
  gap: 52px;
  align-items: center;
}
/* Left intro block */
.seo-trust-intro {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 24px;
  align-items: start;
}
.seo-trust-icon {
  color: #ff7a00;
}
.seo-trust-icon svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seo-trust-kicker {
  margin: 0 0 12px;
  color: #ff8c18;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.seo-trust-copy {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, .92);
  font-size: 1.16rem;
  line-height: 1.88;
  text-align: left;
}
.seo-trust-copy strong {
  color: #fff;
  font-weight: 600;
}
/* Testimonial card */
.seo-trust-quote {
  position: relative;
  padding: 38px 42px 34px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 122, 0, .10), transparent 42%), rgba(12, 17, 24, .76);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .24);
}
.seo-quote-mark {
  display: block;
  margin-bottom: 12px;
  color: #ff7a00;
  font-size: 2.6rem;
  line-height: .7;
  font-weight: 800;
}
.seo-trust-quote p {
  margin: 0;
  color: #fff;
  font-size: 1.16rem;
  line-height: 1.62;
  font-style: italic;
  text-align: left;
}
.seo-trust-stars {
  margin: 22px 0 10px;
  color: #ff9a1f;
  font-size: 1.4rem;
  letter-spacing: .12em;
}
.seo-trust-quote span:last-child {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, .68);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* Trust badges */
.trust-badges {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.trust-badges span {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .025) 100%);
  color: #fff;
  text-align: left;
  transition:
    transform .22s ease, border-color .22s ease, background .22s ease;
}
.trust-badges span:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 122, 0, .48);
  background:
    linear-gradient(180deg, rgba(255, 122, 0, .08), rgba(255, 255, 255, .025));
}
.trust-badges svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #ff8c18;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-badges strong {
  display: block;
  color: #fff;
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 800;
}
.trust-badges small {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, .68);
  font-size: .74rem;
  line-height: 1.3;
}
/* Responsive */
@media (max-width: 980px) {
  .seo-trust-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .seo-trust-content {
    padding: 34px 28px;
  }
  .trust-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  #seo-trust-tile, .seo-trust-tile {
    padding: 44px 16px;
  }
  .seo-trust-content {
    padding: 28px 22px;
  }
  .seo-trust-intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .seo-trust-icon svg {
    width: 48px;
    height: 48px;
  }
  .seo-trust-copy {
    font-size: 1rem;
    line-height: 1.56;
  }
  .seo-trust-quote {
    padding: 28px 24px;
  }
  .seo-trust-quote p {
    font-size: 1.02rem;
  }
  .trust-badges {
    grid-template-columns: 1fr;
  }
}
/* Legacy purchase link styling.
   Remove this block if no p.buy elements remain on the page. */
p.buy {
  display: block;
  clear: both;
  margin-top: 30px;
  color: #fffcc0;
  font-family: "Poppins", sans-serif;
  font-size: 1.3em;
  line-height: 1.1em;
  font-weight: 300;
  letter-spacing: .6px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(34, 25, 7, 1);
}
p.buy a {
  color: #fffcc0;
  font-weight: 500;
  text-underline-offset: 4px;
}
/* Mobile */
@media screen and (max-width: 550px) {
  p.buy {
    font-size: .9em;
    line-height: 1.3em;
    letter-spacing: .8px;
  }
  p.buy a {
    text-underline-offset: 2px;
  }
}
.find_out_more {
  font-size: 1.5em;
  letter-spacing: 2px;
  font-weight: 400;
  margin-bottom: 0px;
  padding: 0px;
  color: rgba(35, 24, 0, 1.00);
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.53);
  text-align: center;
  text-decoration: none;
  margin-top: 30px;
  text-transform: uppercase;
  line-height: 2.2em;
}
.find_out_more a {
  text-decoration: none;
}