/* ============================================================
   SECTIONS — Per-section Layout Styles
   ============================================================ */

/* =============================================
   HERO
   ============================================= */

.hero {
  position: relative;
  width: 100%;
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__bg-color {
  position: absolute;
  inset: 0;
  background: var(--color-a100);
}

.hero__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Position matches Figma: h=237.53%, left=-45%, top=-126.82%, w=160.11% of container */
.hero__bg-img img {
  position: absolute;
  width: 160.11%;
  height: auto;
  left: -45%;
  top: -126.82%;
  max-width: none;
  object-fit: cover;
}

.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(245.9deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 87.79%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  width: 100%;
  max-width: 1484px;
  padding: 0 var(--space-md);
}

/* Product image area (left side) — camera rotated per Figma */
.hero__product {
  flex: 1;
  min-width: 0;
  position: relative;
  /* Enough height to show the full rotated camera */
  height: 650px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotation wrapper — -18.28deg per Figma */
.hero__product-rotate {
  /* position: relative; */
  /* width: 50vw; */
  /* max-width: 604px; */
  /* height: 532px; */
  /* transform: rotate(-18.28deg); */
  /* flex-shrink: 0; */
  /* overflow: hidden; */
}

/* Image bleeds per Figma: w=212.12%, h=160.66%, left=-54.31%, top=-30.33% */
.hero__product-img {
  /* position: absolute; */
  /* width: 212.12%; */
  /* height: 160.66%; */
  /* left: -54.31%; */
  /* top: -30.33%; */
  /* max-width: none; */
}

/* NEW badge — positioned at top-right of product area */
.hero__new-flag {
  position: absolute;
  top: 105px;
  right: 10%;
  background: var(--canon-red);
  padding: 4px 16px;
  border-radius: 2px;
  box-shadow: 3px 3px 0 rgba(150,0,0,0.35), 6px 6px 0 rgba(100,0,0,0.2);
  z-index: 2;
}

.hero__new-flag__text {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
}

/* Pricing rows between body copy and buttons */
.hero__pricing {
  display: flex;
  gap: 21px;
  align-items: center;
}

.hero__price-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  max-width: 280px;
}

.hero__price-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-a00);
  white-space: nowrap;
}

.hero__price-value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-a00);
  white-space: nowrap;
}

/* Text content (right side) */
.hero__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Desktop wrappers — just stack naturally inside hero__content */
.hero__text-top,
.hero__text-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__text-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hero__logo {
  width: 115px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}

/* "Full-frame Video Performance" — small bold gray line above main title */
.hero__supertitle {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-a10);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
  color: var(--color-a00);
}

/* Default subtitle color (white/light) */
.hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-a10);
  max-width: 763px;
}

/* Red variant — "Capture Everything. Create Without Limits" */
.hero__subtitle--red {
  color: var(--canon-red);
}

.hero__body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  line-height: var(--lh-body-md);
  color: var(--color-a00);
}

/* Two CTA buttons side-by-side */
.hero__btns {
  display: flex;
  gap: 25px;
  align-items: center;
}

/* =============================================
   CAMERA FEATURES
   ============================================= */

.camera-features {
  position: relative;
  width: 100%;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  overflow: hidden;
}

.camera-features__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.camera-features__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -22.73deg,
    rgba(0, 0, 0, 0.8) 6.33%,
    rgba(85, 15, 21, 0.8) 58.44%,
    rgba(237, 28, 46, 0.8) 108.69%
  ), linear-gradient(90deg, #000 0%, #000 100%);
}

.camera-features__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.3;
}

.camera-features__bg-img img {
  position: absolute;
  width: 180%;
  height: 180%;
  right: -40%;
  top: -70%;
  max-width: none;
  object-fit: cover;
}

.camera-features__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-a00);
  text-align: center;
  line-height: var(--lh-heading);
}

/* Wrapper that positions the floating image above the card */
.camera-features__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top makes room for the floating image that overlaps the card top */
  padding-top: 360px;
  width: 100%;
}

.camera-features__product-img {
  position: absolute;
  /* Camera overlaps the card: 600px image, padding-top 420px, top -100px
     → camera bottom at 500px, card starts at 420px → 80px overlap into card padding */
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: var(--radius-img);
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

.camera-features__cta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-xl);
}

/* =============================================
   VIDEO BANNER
   ============================================= */

.video-banner {
  position: relative;
  width: 100%;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-banner__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.video-banner__bg-color {
  position: absolute;
  inset: 0;
  background: var(--color-a100);
}

.video-banner__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Figma: h=284.37%, left=8.95%, top=-53.27%, w=full */
.video-banner__bg-img img {
  position: absolute;
  width: 100%;
  height: 284.37%;
  left: 8.95%;
  top: -53.27%;
  max-width: none;
  object-fit: cover;
}

.video-banner__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 9%, rgba(0, 0, 0, 0) 81.27%);
}

.video-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 1024px;
  width: 100%;
  padding: var(--space-xl);
  border-radius: var(--radius-card);
}

.video-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-a00);
  text-align: center;
  line-height: var(--lh-heading);
}

.video-banner__body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: var(--lh-body-lg);
  color: var(--color-a00);
  text-align: center;
}

/* =============================================
   USE CASES
   ============================================= */

.use-cases {
  position: relative;
  width: 100%;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  overflow: hidden;
}

.use-cases__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.use-cases__bg-color {
  position: absolute;
  inset: 0;
  background: var(--color-a100);
}

.use-cases__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.3;
}

/* Figma: h=113.03%, left=-0.02%, top=-13.06%, w=full */
.use-cases__bg-img img {
  position: absolute;
  width: 100%;
  height: 113.03%;
  left: -0.02%;
  top: -13.06%;
  max-width: none;
  object-fit: cover;
}

.use-cases__personas {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--space-sm);
}

.use-cases__video {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--space-sm);
}

/* =============================================
   COMPARE SECTION
   ============================================= */

.compare {
  position: relative;
  background: var(--color-a00);
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.compare__title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
  max-width: 1000px;
  padding: 0 var(--space-sm);
}

.compare__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-a100);
  line-height: var(--lh-heading);
  width: 100%;
}

.compare__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: 28px;
  color: var(--color-a80);
  width: 100%;
}

.compare__table {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--space-sm);
}

/* 4-col grid variant for the checkmark table */
.compare__table--grid {
  align-items: flex-start;
}

.compare__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.compare__table:nth-of-type(2){
  margin-bottom:23px;
}

/* Labels column — left-aligned text labels */
.compare__col--labels {
  flex: 0 0 auto;
  width: 259px;
}

.compare-labels {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

.compare-labels__spacer {
  /* Height set dynamically via JS to match card image-wrap */
  height: 0;
  flex-shrink: 0;
}

.compare-labels__name {
  /* Matches the product name row height */
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  padding: 16px 0;
  display: flex;
  align-items: center;
}

.compare-labels__row {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 22px;
  color: var(--color-a80);
  padding: 16px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  height: 56px;
  box-sizing: border-box;
}

/* Rows inside each product card */
.compare-card__rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.compare-card__row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  height: 56px;
  box-sizing: border-box;
}

/* Check / Cross icons */
.compare-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.compare-icon--check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4.5 4.5L19 7' stroke='%23666666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.compare-icon--cross {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.34 6.34l11.32 11.32M17.66 6.34L6.34 17.66' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* =============================================
   LENS FEATURES
   ============================================= */

.lens-features {
  position: relative;
  width: 100%;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  overflow: hidden;
}

.lens-features__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lens-features__bg-color {
  position: absolute;
  inset: 0;
  background: var(--color-a100);
}

.lens-features__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.4;
}

.lens-features__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lens-features__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-a00);
  text-align: center;
  line-height: var(--lh-heading);
  max-width: var(--max-width);
  padding: 0 var(--space-sm);
}

/* Floating image overhangs the card from the top */
.lens-features__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lens image: 600px tall at top:-30px → bottom at 570px.
     Card starts at padding-top. Overlap = 570 - padding-top.
     Figma target: 130px overlap → padding-top = 440px */
  padding-top: 440px;
  width: 100%;
}

.lens-features__product-img {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: var(--radius-img);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.lens-features__cta {
  position: relative;
  z-index: 1;
  margin-top: var(--space-xl);
}

/* =============================================
   ACCESSORY
   ============================================= */

.accessory {
  position: relative;
  width: 100%;
  padding: var(--space-xl) 0;
  overflow: hidden;
}

.accessory__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.accessory__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -19.08deg,
    #000000 1.63%,
    #550f15 38.88%,
    #ed1c2e 117.63%
  );
}

.accessory__bg-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.3;
}

/* Figma: h=353.39%, left=0, top=-130.39%, w=full */
.accessory__bg-img img {
  position: absolute;
  width: 100%;
  height: 353.39%;
  left: 0;
  top: -130.39%;
  max-width: none;
  object-fit: cover;
}

.accessory__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-xxl);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

.accessory__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.accessory__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-a05);
  line-height: var(--lh-heading);
  max-width: 663px;
}

.accessory__body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-a00);
}

.accessory__product-img {
  flex-shrink: 0;
  width: 619px;
  height: 481px;
  object-fit: contain;
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
  background: var(--color-a100);
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 763px;
  padding: 0 var(--space-sm);
}

.footer__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 800;
  color: var(--color-a00);
  text-align: center;
  line-height: var(--lh-heading);
}

.footer__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-a00);
  text-align: center;
  line-height: var(--lh-heading);
}

.footer__actions {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
}