@charset "utf-8";
/* CSS Document */


:root{
  --duration-blue: #0b5f9a;
  --duration-grey: #3f4a57;
}

/* --- Feature area background --- */
.feature-area{
  background: linear-gradient(180deg, #f3f3f3 0%, #ededed 100%);
  padding: 34px 0 60px;
}

/* --- Wrapper: keeps it NOT full width --- */
.feature-list{
  display: grid;
  gap: 16px;
  max-width: 1200px;
  margin: 22px auto 60px;
  padding: 0 18px;
}

/* --- Card (AMENDED) --- */
.feature-card{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* image slightly wider */
  height: 450px;                         /* <<< target height */
  border-radius: 22px;
  overflow: hidden;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 10px 26px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.05);
}

/* --- Left image area (AMENDED) --- */
.feature-media{
  position: relative;
  background-size: cover;
  background-position: center;
  height: 100%;      /* ensures full 450px height */
  min-height: 0;     /* overrides old 220px constraint */
}

/* --- Fade from image INTO white content (AMENDED) --- */
.feature-fade{
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* left->right white bleed to meet the white panel */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,.35) 72%,
    rgba(255,255,255,.75) 84%,
    rgba(255,255,255,1) 100%
  );
}

/* --- Right content area (AMENDED: now white + black text) --- */
.feature-body{
  position: relative;
  padding: clamp(18px, 2.2vw, 34px);
  display: grid;
  align-content: center;
  gap: 10px;

  background: #ffffff;
  color: #111;
  border-left: 1px solid rgba(0,0,0,.06);
}

/* subtle “premium” highlight on the white panel */
.feature-body::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 300px at 20% 10%, rgba(0,0,0,.04), transparent 55%);
  pointer-events:none;
}

/* --- Typography (AMENDED) --- */
.feature-eyebrow{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.feature-title{
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  color: #111;
}

.feature-text{
  margin: 0;
  color: rgba(0,0,0,.70);
    font-size: 14px;
  line-height: 1.6;
  max-width: 52ch;
}

/* --- Actions row (stays mostly same) --- */
.feature-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* --- Buttons (AMENDED: subtle grey secondary, keep primary) --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #f2f2f2;
  color: #111;
  text-decoration: none;
  font-weight: 650;
  font-size: 14px;
}
.btn:hover{ background: #e9e9e9; }

.btn.primary{
  background: linear-gradient(
    180deg,
    #f7c55a 0%,
    #f0a83a 45%,
    #e68a00 100%
  );
  color: #111;
  border: 1px solid #c87f00;
  box-shadow:
    0 2px 0 #b36a00,
    0 6px 16px rgba(0,0,0,.18);
}
.btn.primary:hover{
  background: linear-gradient(
    180deg,
    #f5b948 0%,
    #e79a27 45%,
    #d97800 100%
  );
}
.btn.primary:active{
  background: #d97800;
  box-shadow:
    0 1px 0 #b36a00,
    inset 0 2px 4px rgba(0,0,0,.25);
  transform: translateY(1px);
}

/* --- Responsive: stack on mobile (AMENDED) --- */
@media (max-width: 820px){
  .feature-card{
    grid-template-columns: 1fr;
    height: auto; /* don’t force 450px on phones */
  }

  .feature-media{
    height: 260px; /* nicer mobile crop */
  }

  /* On mobile, fade from bottom into white (looks better stacked) */
  .feature-fade{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,1) 100%
    );
  }
}


/* ===== Product card additions ===== */

.product-card .feature-body{
  gap: 10px;
}

/* KPI list (vertical, neat, compact) */
.kpi-list{
  list-style: none;
  margin: 6px 0 2px;
  padding: 0;

  display: grid;
  gap: 8px;

  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
}

.kpi-list li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;

  font-size: 13px;
  line-height: 1.2;
}

.kpi-label{
  color: rgba(0,0,0,.62);
  font-weight: 650;
}

.kpi-value{
  color: rgba(0,0,0,.86);
  font-weight: 750;
  white-space: nowrap;
}
.kpi-list{
  border-top: 0;
  padding: 6px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}
.kpi-list li{
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.10);
}
.kpi-list li:last-child{ border-bottom: 0; }


.kpi-row.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-bottom: 1px dashed rgba(0,0,0,.10);
  padding: 6px 0;
}

.kpi-row.two-col div{
  display: flex;
  justify-content: space-between;
  gap: 10px;
}



/* Product links row */
.product-links{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plink{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  border-radius: 999px;

  background: #e6e6e6;                 /* darker than before */
  color: #111;
  text-decoration: none;

  font-weight: 650;
  font-size: 13px;

  border: 1px solid rgba(0,0,0,.18);   /* crisper edge */
  border-bottom-color: rgba(0,0,0,.28);

  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 6px rgba(0,0,0,.12);

  transition: all .15s ease;
}

.plink:hover{
  background: #dddddd;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 4px 10px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

.plink-cta{
  background: linear-gradient(180deg, #ffcf70 0%, #f2a319 55%, #de8500 100%);
  border-color: rgba(11,95,154,.35);
  color: #000;
  
}

.plink-cta:hover{
  background: rgba(11,95,154,.24);
}

.plink-cta:hover{
  background: rgba(11,95,154,.16);
}

/* Keep it from getting too tall on desktop */
@media (min-width: 821px){
  .product-card .feature-text{
    max-width: 52ch;
  }
}
/* ===== Premium USP Sash ===== */

.feature-usp{
  position: absolute;
  top: 85px;
  left: -48px;

  transform: rotate(-38deg);
  transform-origin: left top;

  background: linear-gradient(
    135deg,
  #1e7fc4 0%,
  #0f6fb5 55%,
  #0a5fa0 100%
  );

  padding: 10px 70px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 8px 18px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.15);

  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
}

.feature-usp::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,0)
  );
  pointer-events:none;
}

.usp-main{
  font-size: 15px;
}

.usp-sub{
  font-size: 10px;
  text-transform: uppercase;
  opacity: .9;
}


/* ===== Split the right panel into Info + Profile ===== */

.product-split{
  display: grid;
  grid-template-columns: 1fr 190px; /* left grows, right fixed */
  gap: 14px;
  align-items: start;
}

/* Make sure the existing spacing stays nice */
.product-info{
  min-width: 0; /* stops overflow in grid */
}

/* Right column card */
.product-profile{
  display: grid;
  align-content: start;
}

.profile-card{
  border-radius: 16px;
  background: rgba(0,0,0,.025);
  border: 1px solid rgba(0,0,0,.08);
  padding: 10px;
}

/* Profile image */
.profile-img{
  width: 100%;
  height: 170px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
 /* background: #fff;
  border: 1px solid rgba(0,0,0,.06);*/
}

/* Optional dimensions list (compact, not shouty) */
.dims{
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dims-row{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding-top: 6px;
  border-top: 1px dashed rgba(0,0,0,.12);
}
.dims-row:first-child{
  border-top: 0;
  padding-top: 0;
}

.dims dt{
  margin: 0;
  color: rgba(0,0,0,.62);
  font-weight: 650;
}

.dims dd{
  margin: 0;
  color: rgba(0,0,0,.88);
  font-weight: 750;
  white-space: nowrap;
}

/* ===== Responsive: stack profile above or below neatly ===== */
@media (max-width: 820px){
  .product-split{
    grid-template-columns: 1fr;
  }

  .profile-img{
    height: 150px;
  }
}

/* ===== Performance Icon Grid (Refined) ===== */

.performance-icons{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
    margin: 18px 0 18px;   /* ← adds top & bottom clearance */
  padding: 8px 0;        /* ← subtle internal breathing space */
}

/* Individual item */
.perf-item{
  text-align: center;
}

/* Smaller, refined square */
.perf-icon{
  height: 48px;               /* reduced height */
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 750;
  font-size: 16px;

  border: 1px solid rgba(0,0,0,.06);
  transition: all .2s ease;
}

/* Subtle tinted backgrounds */
.perf-icon.wer{
  background: rgba(11,95,154,.08);   /* duration blue tint */
  color: #0b5f9a;
}

.perf-icon.air{
  background: rgba(0,140,120,.08);
  color: #008c78;
}

.perf-icon.water{
  background: rgba(0,110,180,.08);
  color: #006eb4;
}

.perf-icon.wind{
  background: rgba(80,80,80,.08);
  color: #444;
}

/* Label */
.perf-label{
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(0,0,0,.65);
}

/* Very subtle hover */
.perf-item:hover .perf-icon{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.12);
}

/* Mobile */
@media (max-width: 820px){
  .performance-icons{
    grid-template-columns: repeat(2, 1fr);
  }
}



/* Best Seller modifier = your original orange */
.feature-usp--best{
  padding: 12px 88px;          /* wider sash */
  top: 120px;                   /* nudge up a touch */
  left: -56px;                 /* nudge left so it still sits nicely */
  background: linear-gradient(
    135deg,
    #ff7a18 0%,
    #ff5400 50%,
    #d94000 100%
  );
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    0 3px 10px rgba(0,0,0,.18);
    
      outline: 2px solid rgba(255,255,255,.45);
  outline-offset: -6px;
}

/* Make the text read a bit more at a glance */
.feature-usp--best .usp-main{ font-size: 20px; letter-spacing: .06em; }
.feature-usp--best .usp-sub{ font-size: 18px; letter-spacing: .16em; }


.feature-usp--best::before{
  content: "★";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .95;
}



/* ===== CTA Row (buttons + logo aligned) ===== */


.cta-with-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.cta-with-logo img{
  height: 26px;
  width: auto;
  object-fit: contain;
  opacity: .85;
  transform: translateY(1px);
}

/* make the nav take full width */
.product-links{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* 👇 This pushes ONLY the logo right */
.product-system-logo{
  margin-left: auto;
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: .99;
}