/* =========================================================
   QUALEX LANDING
   HERO + AFTER THE ANALYSIS
   ========================================================= */

.landing-workspace-page {
  --ink: #111111;
  --paper: #f4f4f4;
  --white: #ffffff;

  --yellow: #f4c73f;
  --yellow-hover: #e9bb2d;

  --lime: #80e965;
  --lime-hover: #70dc55;

  --green: #69d28f;
  --green-dark: #2fb36d;

  --blue: #4aa3df;
  --blue-hover: #3b96d3;

  --coral: #f2a087;
  --coral-line: #d66d52;

  position: relative;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--paper) !important;
  background-image: none !important;

  display: flex;
  flex-direction: column;
  align-items: stretch !important;

  overflow-x: hidden;
}

.landing-page {
  width: 100%;
  max-width: none;

  margin: 0 !important;

  padding:
    clamp(18px, 2.2vw, 32px)
    clamp(18px, 3vw, 42px)
    70px;

  box-sizing: border-box;

  background: var(--paper) !important;
  background-image: none !important;

  color: var(--ink);
}


/* =========================================================
   SOCIAL BAR
   ========================================================= */

.landing-social-banner {
  position: relative;
  z-index: 50;

  flex: 0 0 auto;
  align-self: stretch;

  width: 100% !important;
  max-width: none !important;
  min-height: 46px;

  margin: 0 !important;
  padding: 9px 20px;

  box-sizing: border-box;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--lime);
  color: #111111;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.015em;

  text-align: center;
  text-decoration: none;

  box-shadow: none !important;

  transition: background-color 0.16s ease;
}

.landing-social-banner:hover {
  background: var(--lime-hover);
  color: #111111;
}

.landing-social-banner-star {
  flex: 0 0 auto;

  color: #d43838;

  font-size: 15px;
  line-height: 1;

  transform: rotate(-8deg);
}

.landing-social-banner-end {
  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin-left: 2px;

  display: inline-grid;
  place-items: center;
}

.landing-social-banner-end svg {
  width: 17px;
  height: 17px;

  stroke-width: 2.5;
}


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

.landing-hero {
  width: min(1320px, 100%);

  min-height: min(620px, calc(100dvh - 115px));

  margin: 0 auto;

  padding:
    clamp(34px, 4vw, 56px)
    0
    clamp(48px, 5vw, 72px);

  display: flex;
  align-items: center;
}

.landing-hero-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(350px, 0.9fr)
    minmax(500px, 1.1fr);

  align-items: center;

  gap: clamp(48px, 5vw, 76px);
}

.landing-hero-copy {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 585px;
}


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

.landing-kicker {
  width: fit-content;
  min-height: 31px;

  padding: 0 11px;

  border: 2px solid #111111;
  border-radius: 0;

  background: #ffffff;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #111111;

  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;

  text-transform: uppercase;

  box-shadow: 4px 4px 0 #111111;
}

.landing-kicker-dot {
  flex: 0 0 auto;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--green-dark);
}


/* =========================================================
   TITLE
   ========================================================= */

.landing-hero h1 {
  max-width: 590px;

  margin: 15px 0 0;

  color: #111111;

  font-size: clamp(36px, 3.65vw, 53px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -0.052em;
}

.landing-title-main {
  display: block;
}

.landing-title-accent {
  display: table;

  width: fit-content;

  margin-top: 3px;

  padding:
    0.015em
    0.10em
    0.075em;

  background: var(--yellow);
  color: #111111;

  font-style: italic;
  line-height: 0.92;
}

.landing-title-line {
  display: block;

  margin-top: 7px;
}

.landing-hero-lead {
  max-width: 535px;

  margin: 20px 0 0;

  color: #3f4752;

  font-size: clamp(14px, 1vw, 16px);
  font-weight: 620;
  line-height: 1.55;
}


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

.landing-hero-actions {
  margin-top: 25px;

  display: flex;
  align-items: center;
  gap: 12px;

  flex-wrap: wrap;
}

.landing-button {
  min-height: 46px;

  padding: 0 18px;

  border: 2px solid #111111;
  border-radius: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #111111;

  font: inherit;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;

  text-transform: uppercase;
  text-decoration: none;

  cursor: pointer;

  box-shadow: 3px 3px 0 #111111;

  transform: translate(0, 0);

  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.landing-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111111;
}

.landing-button:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}

.landing-button--primary {
  background: var(--yellow);
}

.landing-button--primary:hover {
  background: var(--yellow-hover);
}

.landing-button-arrow {
  font-size: 16px;
  font-weight: 950;
  line-height: 1;

  transition: transform 0.16s ease;
}

.landing-button--primary:hover .landing-button-arrow {
  transform: translateX(2px);
}

.landing-button--secondary {
  background: #ffffff;
}

.landing-button--secondary:hover {
  background: #111111;
  color: #ffffff;
}

.landing-demo-play {
  font-size: 10px;
  line-height: 1;
}


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

.landing-hero-product {
  position: relative;

  width: 92%;
  min-width: 0;

  justify-self: end;

  padding:
    22px
    13px
    32px
    17px;
}

.landing-product-window {
  position: relative;
  z-index: 2;

  width: 100%;

  overflow: hidden;

  border: 2px solid #111111;
  border-radius: 0;

  background: #ffffff;

  box-shadow: 7px 7px 0 #111111;
}

.landing-product-window-bar {
  min-height: 37px;

  padding: 0 12px;

  border-bottom: 2px solid #111111;

  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  color: #111111;

  font-size: 8.5px;
  font-weight: 900;
  line-height: 1;

  text-transform: uppercase;
}

.landing-window-brand {
  letter-spacing: 0.055em;
}

.landing-window-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #59616c;
}

.landing-window-status-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--green-dark);
}

.landing-product-screen {
  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #ffffff;
}

.landing-product-screen img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: top center;
}


/* =========================================================
   FLOATING CARDS
   ========================================================= */

.landing-floating-card {
  position: absolute;
  z-index: 7;

  border: 2px solid #111111;
  border-radius: 0;

  box-shadow: 4px 4px 0 #111111;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.landing-floating-card:hover {
  box-shadow: 5px 5px 0 #111111;
}


/* MATCH */

.landing-floating-card--match {
  top: 0;
  right: -5px;

  width: 154px;
  min-height: 84px;

  padding: 11px 12px 10px;

  background: var(--green);
  color: #111111;

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

  transform: rotate(0.8deg);
}

.landing-floating-card--match:hover {
  transform:
    translate(-1px, -1px)
    rotate(0.8deg);
}

.landing-floating-card--match .landing-floating-card-label {
  display: block;

  font-family: inherit;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.landing-match-value-row {
  margin-top: 4px;

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

  gap: 10px;
}

.landing-match-value-row strong {
  display: block;

  font-family: inherit;
  font-size: 35px;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.landing-match-check {
  width: 25px;
  height: 25px;

  border: 2px solid #111111;
  border-radius: 50%;

  display: grid;
  place-items: center;

  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.landing-match-meter {
  width: 100%;
  height: 5px;

  margin-top: 8px;

  border: 1.5px solid #111111;

  background: rgba(255,255,255,0.35);

  display: block;
  overflow: hidden;
}

.landing-match-meter > span {
  display: block;

  width: 84%;
  height: 100%;

  background: #111111;
}

/* EXCEL */

.landing-floating-card--excel {
  left: -5px;
  bottom: 2px;

  min-width: 146px;
  min-height: 50px;

  padding: 9px 12px;

  background: var(--blue);
  color: #ffffff;

  display: flex;
  align-items: center;
  gap: 9px;

  transform: rotate(-0.8deg);
}

.landing-floating-card--excel:hover {
  transform:
    translate(-1px, -1px)
    rotate(-0.8deg);
}

.landing-excel-icon {
  flex: 0 0 auto;

  width: 22px !important;
  height: 22px !important;

  color: #ffffff;

  stroke: currentColor;
  stroke-width: 2.2;
}

.landing-excel-copy strong,
.landing-excel-copy span {
  display: block;
}

.landing-excel-copy strong {
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.landing-excel-copy span {
  margin-top: 3px;

  font-size: 8px;
  font-weight: 750;
  line-height: 1.15;
}


/* =========================================================
   AFTER THE ANALYSIS
   ========================================================= */

.landing-continuity {
  position: relative;

  width: min(1220px, 100%);

  margin:
    clamp(46px, 5vw, 72px)
    auto
    0;

  padding:
    clamp(62px, 6vw, 82px)
    clamp(34px, 5vw, 66px)
    clamp(56px, 6vw, 78px);

  border: 2px solid #111111;
  border-radius: 0;

  background: var(--coral);

  box-shadow: 7px 7px 0 #111111;

  overflow: visible;
  isolation: isolate;
}

.landing-continuity-art {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.landing-continuity-inner {
  position: relative;
  z-index: 2;
}


/* Curves stay clipped inside only the coral block */

.landing-continuity-curve {
  position: absolute;

  width: 50%;
  height: 150px;

  fill: none;

  stroke: var(--coral-line);
  stroke-width: 2.1;
  stroke-linecap: round;

  opacity: 0.62;
}

.landing-continuity-curve--top {
  top: -26px;
  left: -34px;
}

.landing-continuity-curve--bottom {
  right: -34px;
  bottom: -30px;

  transform: scaleX(-1);
}


/* Larger badge, exactly half outside / half inside */

.landing-continuity-badge {
  position: absolute;

  z-index: 5;

  top: 0;
  left: 50%;

  transform: translate(-50%, -50%);

  min-height: 42px;

  padding: 0 20px;

  border: 2px solid #111111;
  border-radius: 0;

  background: #ffffff;
  color: #111111;

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

  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.055em;

  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: 4px 4px 0 #111111;
}


/* Heading */

.landing-continuity-heading {
  max-width: 760px;

  margin: 0 auto 34px;

  text-align: center;
}

.landing-continuity-heading h2 {
  margin: 0;

  color: #111111;

  font-size: clamp(34px, 4vw, 54px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.landing-continuity-heading p {
  max-width: 640px;

  margin: 14px auto 0;

  color: #3b302d;

  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}


/* Cards are narrower and have more breathing room */

.landing-continuity-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: clamp(22px, 2.5vw, 30px);

  align-items: stretch;
}

.landing-continuity-card {
  position: relative;

  min-width: 0;
  min-height: 250px;

  padding: 24px 22px;

  border: 2px solid #111111;
  border-radius: 6px;

  background: #ffffff;

  box-shadow: 4px 4px 0 #111111;

  display: flex;
  align-items: center;

  overflow: visible;
  isolation: isolate;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.landing-continuity-card:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #111111;
}


/* Gray circle intentionally peeks outside the upper-left corner */

.landing-continuity-orb {
  position: absolute;

  z-index: 0;

  top: -24px;
  left: -24px;

  width: 78px;
  height: 78px;

  border: 2px solid #111111;
  border-radius: 50%;

  background: #cfd2d6;
}

.landing-continuity-card-content {
  position: relative;
  z-index: 2;

  width: 100%;

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

.landing-continuity-icon {
  width: 42px;
  height: 42px;

  margin-bottom: 22px;

  border: 2px solid #111111;
  border-radius: 4px;

  display: grid;
  place-items: center;

  box-shadow: 2px 2px 0 #111111;
}

.landing-continuity-icon svg {
  width: 20px;
  height: 20px;

  stroke-width: 2.25;
}

.landing-continuity-icon--yellow {
  background: #f5d259;
}

.landing-continuity-icon--green {
  background: #9ee49f;
}

.landing-continuity-icon--blue {
  background: #9bcbed;
}

.landing-continuity-card h3 {
  margin: 0;

  color: #111111;

  font-size: clamp(21px, 1.85vw, 27px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.landing-continuity-card p {
  margin: 11px 0 0;

  color: #4a4f56;

  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.48;
}


/* =========================================================
   DEMO MODAL
   ========================================================= */

.landing-demo-modal[hidden] {
  display: none;
}

.landing-demo-modal {
  position: fixed;
  inset: 0;

  z-index: 1500;

  box-sizing: border-box;

  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));

  display: grid;
  place-items: center;

  overflow: auto;
  overscroll-behavior: contain;

  opacity: 0;

  transition: opacity 0.16s ease;
}

.landing-demo-modal.is-open {
  opacity: 1;
}

.landing-demo-backdrop {
  position: fixed;
  inset: 0;

  background: rgba(17, 17, 17, 0.76);
  backdrop-filter: blur(2px);
}

.landing-demo-dialog {
  position: relative;
  z-index: 1;

  /*
   * The dialog is constrained by BOTH viewport width and height.
   * This prevents a square video from overflowing on narrow/short phones.
   */
  width: min(
    680px,
    calc(100vw - 44px),
    calc(100dvh - 72px)
  );

  max-width: 100%;
  max-height: calc(100dvh - 36px);

  aspect-ratio: 1 / 1;

  border: 2px solid #111111;
  background: #000000;

  /* black hard shadow */
  box-shadow: 8px 8px 0 #111111;

  transform:
    translateY(8px)
    scale(0.985);

  transition:
    transform 0.16s ease;
}

.landing-demo-modal.is-open .landing-demo-dialog {
  transform:
    translateY(0)
    scale(1);
}

.landing-demo-video {
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  display: block;

  object-fit: contain;

  background: #000000;
}

.landing-demo-close {
  position: absolute;
  z-index: 3;

  top: -14px;
  right: -14px;

  width: 38px;
  height: 38px;

  padding: 0;

  border: 2px solid #111111;
  border-radius: 0;

  background: var(--yellow);
  color: #111111;

  display: grid;
  place-items: center;

  font-size: 21px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  /* black hard shadow */
  box-shadow: 3px 3px 0 #111111;

  transform: translate(0, 0);

  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.landing-demo-close:hover {
  background: var(--yellow-hover);

  transform: translate(-1px, -1px);

  box-shadow: 4px 4px 0 #111111;
}

.landing-demo-close:active {
  transform: translate(1px, 1px);

  box-shadow: 1px 1px 0 #111111;
}

body.landing-video-open {
  overflow: hidden;
}


/* Mobile modal:
   close button stays INSIDE the frame,
   dialog cannot exceed the visible phone area. */

@media (max-width: 620px) {
  .landing-demo-modal {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .landing-demo-dialog {
    width: min(
      calc(100vw - 24px),
      calc(100dvh - 48px)
    );

    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);

    box-shadow: 5px 5px 0 #111111;
  }

  .landing-demo-close {
    top: 8px;
    right: 8px;

    width: 35px;
    height: 35px;

    font-size: 19px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-demo-close:hover {
    box-shadow: 4px 4px 0 #111111;
  }

  .landing-demo-close:active {
    box-shadow: 1px 1px 0 #111111;
  }
}


/* Very short screens / landscape phones */

@media (max-height: 560px) {
  .landing-demo-dialog {
    width: min(
      620px,
      calc(100vw - 40px),
      calc(100dvh - 28px)
    );

    max-height: calc(100dvh - 20px);
  }

  .landing-demo-close {
    top: 7px;
    right: 7px;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {
  .landing-hero {
    min-height: auto;
    padding-top: 38px;
  }

  .landing-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .landing-hero-copy {
    width: min(680px, 100%);
    margin-inline: auto;

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

    text-align: center;
  }

  .landing-title-accent {
    margin-left: auto;
    margin-right: auto;
  }

  .landing-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .landing-hero-actions {
    justify-content: center;
  }

  .landing-hero-product {
    width: min(760px, 92%);
    margin-inline: auto;
    justify-self: center;
  }

  .landing-continuity {
    padding-left: 28px;
    padding-right: 28px;
  }

  .landing-continuity-grid {
    gap: 12px;
  }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 820px) {
  .landing-continuity-grid {
    grid-template-columns: 1fr;
  }

  .landing-continuity-card {
    min-height: 205px;
  }

  .landing-continuity-card h3 {
    margin-top: 18px;
  }

  .landing-continuity-curve {
    width: 75%;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .landing-social-banner {
    min-height: 42px;

    padding: 8px 11px;

    font-size: 10px;
    gap: 7px;
  }

  .landing-social-banner-star {
    font-size: 12px;
  }

  .landing-social-banner-end {
    width: 18px;
    height: 18px;
  }

  .landing-social-banner-end svg {
    width: 14px;
    height: 14px;
  }

  .landing-page {
    padding:
      12px
      11px
      44px;
  }

  .landing-hero {
    min-height: auto;

    padding:
      28px
      0
      46px;
  }

  .landing-hero-grid {
    gap: 39px;
  }

  .landing-kicker {
    min-height: 29px;

    padding: 0 9px;

    font-size: 8.5px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-hero h1 {
    margin-top: 13px;

    font-size: clamp(36px, 10.8vw, 47px);
    line-height: 0.98;
  }

  .landing-title-accent {
    margin-top: 2px;
  }

  .landing-title-line {
    margin-top: 5px;
  }

  .landing-hero-lead {
    margin-top: 17px;

    font-size: 14px;
    line-height: 1.5;
  }

  .landing-hero-actions {
    width: 100%;

    margin-top: 21px;

    gap: 9px;
  }

  .landing-button--primary,
  .landing-button--secondary {
    width: 100%;
  }

  .landing-hero-product {
    width: 100%;

    padding:
      23px
      4px
      35px;
  }

  .landing-product-window {
    box-shadow: 5px 5px 0 #111111;
  }

  .landing-product-window-bar {
    min-height: 34px;

    padding: 0 9px;

    font-size: 7px;
  }

  .landing-floating-card--match {
    top: 3px;
    right: -2px;

    width: 126px;
    min-height: 73px;

    padding: 7px;

    grid-template-columns:
      27px
      minmax(0, 1fr);

    gap: 5px;
  }

  .landing-match-icon {
    width: 27px;
  }

  .landing-match-icon svg {
    width: 18px;
    height: 18px;
  }

  .landing-floating-card--match strong {
    font-size: 27px;
  }

  .landing-floating-card-label {
    font-size: 6px;
  }

  .landing-floating-card-caption {
    font-size: 6.7px;
  }

  .landing-floating-card--excel {
    left: -2px;
    bottom: 6px;

    min-width: 122px;
    min-height: 44px;

    padding: 7px 8px;

    gap: 7px;
  }

  .landing-excel-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .landing-excel-copy strong {
    font-size: 12px;
  }

  .landing-excel-copy span {
    font-size: 7px;
  }

  .landing-continuity {
    margin-top: 12px;

    padding:
      42px
      14px
      20px;

    box-shadow: 5px 5px 0 #111111;
  }

  .landing-continuity-badge {
    margin-top: -56px;
    margin-bottom: 20px;

    padding: 7px 11px;

    font-size: 9px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-continuity-heading {
    margin-bottom: 22px;
  }

  .landing-continuity-heading h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .landing-continuity-heading p {
    font-size: 12.5px;
  }

  .landing-continuity-card {
    min-height: 195px;

    padding: 18px 17px;

    border-radius: 4px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-continuity-icon {
    width: 36px;
    height: 36px;

    margin-bottom: 14px;
  }

  .landing-continuity-icon svg {
    width: 17px;
    height: 17px;
  }

  .landing-continuity-card h3 {
    margin-top: 13px;

    font-size: 24px;
  }

  .landing-continuity-card p {
    font-size: 12px;
  }

  .landing-continuity-curve {
    width: 100%;
    height: 110px;

    opacity: 0.55;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {
  .landing-hero h1 {
    font-size: clamp(34px, 10.5vw, 41px);
  }

  .landing-floating-card--match {
    width: 116px;
  }

  .landing-floating-card--excel {
    min-width: 116px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .landing-button,
  .landing-floating-card,
  .landing-continuity-card {
    transition: none;
  }
}


/* =========================================================
   LATEST RESPONSIVE OVERRIDES
   ========================================================= */

@media (max-width: 1120px) {
  .landing-continuity {
    width: min(900px, 100%);

    padding-left: 34px;
    padding-right: 34px;
  }

  .landing-continuity-grid {
    gap: 22px;
  }
}

@media (max-width: 820px) {
  .landing-continuity {
    width: min(640px, 100%);

    padding:
      68px
      28px
      42px;
  }

  .landing-continuity-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .landing-continuity-card {
    min-height: 220px;
  }

  .landing-continuity-orb {
    top: -20px;
    left: -20px;

    width: 68px;
    height: 68px;
  }

  .landing-continuity-curve {
    width: 85%;
  }
}

@media (max-width: 620px) {
  .landing-floating-card--match {
    width: 120px;
    min-height: 69px;

    padding: 8px 9px;
  }

  .landing-floating-card--match .landing-floating-card-label {
    font-size: 6.2px;
  }

  .landing-match-value-row {
    margin-top: 3px;
  }

  .landing-match-value-row strong {
    font-size: 27px;
  }

  .landing-match-check {
    width: 20px;
    height: 20px;

    border-width: 1.5px;

    font-size: 10px;
  }

  .landing-match-meter {
    height: 4px;

    margin-top: 6px;
  }

  .landing-continuity {
    width: calc(100% - 6px);

    margin-top: 44px;

    padding:
      62px
      18px
      28px;

    box-shadow: 5px 5px 0 #111111;
  }

  .landing-continuity-badge {
    min-height: 38px;

    padding: 0 15px;

    font-size: 10px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-continuity-heading {
    margin-bottom: 26px;
  }

  .landing-continuity-heading h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .landing-continuity-heading p {
    font-size: 12.5px;
  }

  .landing-continuity-grid {
    gap: 28px;
  }

  .landing-continuity-card {
    min-height: 205px;

    padding: 22px 18px;

    border-radius: 4px;

    box-shadow: 3px 3px 0 #111111;
  }

  .landing-continuity-orb {
    top: -18px;
    left: -18px;

    width: 60px;
    height: 60px;
  }

  .landing-continuity-icon {
    width: 37px;
    height: 37px;

    margin-bottom: 16px;
  }

  .landing-continuity-icon svg {
    width: 17px;
    height: 17px;
  }

  .landing-continuity-card h3 {
    font-size: 24px;
  }

  .landing-continuity-card p {
    font-size: 12px;
  }

  .landing-continuity-curve {
    width: 110%;
    height: 105px;

    opacity: 0.48;
  }
}


/* =========================================================
   FINAL MODAL SAFETY OVERRIDE
   Keep the square promo video fully visible on phones.
   ========================================================= */

@supports (height: 100dvh) {
  @media (max-width: 620px) {
    .landing-demo-dialog {
      width: min(calc(100vw - 24px), calc(100dvh - 48px)) !important;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100dvh - 24px) !important;
    }
  }
}


/* =========================================================
   LATEST REFINEMENTS
   ========================================================= */

/* Secondary demo button: do NOT turn fully black on hover,
   otherwise it merges into the hard black shadow. */
.landing-button--secondary:hover {
  background: #dfe3e8 !important;
  color: #111111 !important;

  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111111;
}


/* AFTER THE ANALYSIS: restore full available section width */
.landing-continuity {
  width: 100% !important;
  max-width: none !important;

  box-sizing: border-box;
}


/* Gray circles removed entirely */
.landing-continuity-orb {
  display: none !important;
}


/* =========================================================
   TABLET / WRAPPED HERO
   Keep screenshot and floating badges from colliding.
   ========================================================= */

@media (max-width: 1120px) {

  .landing-hero-product {
    width: min(700px, 86%) !important;

    padding:
      26px
      34px
      40px !important;
  }

  .landing-floating-card--match {
    top: 2px;
    right: 8px;
  }

  .landing-floating-card--excel {
    left: 8px;
    bottom: 6px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  /* Smaller product screenshot on phones so the floating
     Evidence/Excel cards have breathing room. */
  .landing-hero-product {
    width: 91% !important;

    margin-inline: auto !important;

    padding:
      28px
      22px
      42px !important;

    justify-self: center !important;
  }

  .landing-product-window {
    width: 100%;

    box-shadow: 4px 4px 0 #111111;
  }

  .landing-product-screen {
    aspect-ratio: 16 / 10;
  }

  .landing-floating-card--match {
    top: 4px;
    right: -1px;

    width: 112px;
    min-height: 64px;

    padding: 7px 8px;
  }

  .landing-floating-card--match .landing-floating-card-label {
    font-size: 5.8px;
  }

  .landing-match-value-row strong {
    font-size: 25px;
  }

  .landing-match-check {
    width: 18px;
    height: 18px;

    font-size: 9px;
  }

  .landing-match-meter {
    margin-top: 5px;
  }

  .landing-floating-card--excel {
    left: 0;
    bottom: 8px;

    min-width: 114px;
    min-height: 42px;

    padding: 6px 8px;

    gap: 6px;
  }

  .landing-excel-icon {
    width: 17px !important;
    height: 17px !important;
  }

  .landing-excel-copy strong {
    font-size: 11px;
  }

  .landing-excel-copy span {
    font-size: 6.6px;
  }


  /* Video modal is deliberately smaller than viewport.
     Close button sits fully INSIDE the modal. */
  .landing-demo-modal {
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .landing-demo-dialog {
    width: min(
      82vw,
      calc(100dvh - 110px)
    ) !important;

    max-width: 82vw !important;
    max-height: calc(100dvh - 80px) !important;

    box-shadow: 4px 4px 0 #111111 !important;
  }

  .landing-demo-close {
    top: 8px !important;
    right: 8px !important;

    width: 33px;
    height: 33px;

    font-size: 18px;

    box-shadow: 3px 3px 0 #111111 !important;
  }

  .landing-demo-close:hover {
    box-shadow: 4px 4px 0 #111111 !important;
  }

  .landing-demo-close:active {
    box-shadow: 1px 1px 0 #111111 !important;
  }


  /* Full-width coral section inside landing-page content area */
  .landing-continuity {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}


/* Very narrow phones */
@media (max-width: 390px) {

  .landing-hero-product {
    width: 88% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .landing-demo-dialog {
    width: min(
      78vw,
      calc(100dvh - 100px)
    ) !important;

    max-width: 78vw !important;
  }

}


/* =========================================================
   FINAL REFINEMENTS
   ========================================================= */

/* Keep AFTER THE ANALYSIS aligned with the main landing width,
   instead of stretching across nearly the whole viewport. */
.landing-continuity {
  width: min(1320px, 100%) !important;
  max-width: 1320px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}


/* More compact cards: less vertical air, same readable content. */
.landing-continuity-card {
  min-height: 205px !important;

  padding:
    16px
    20px !important;
}

.landing-continuity-card-content {
  justify-content: center !important;
}

.landing-continuity-icon {
  width: 39px !important;
  height: 39px !important;

  margin-bottom: 14px !important;
}

.landing-continuity-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.landing-continuity-card h3 {
  margin: 0 !important;
}

.landing-continuity-card p {
  margin-top: 9px !important;
}


/* Demo button stays visually separate from the hard black shadow. */
.landing-button--secondary:hover {
  background: var(--green) !important;
  color: #111111 !important;

  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 #111111 !important;
}


/* =========================================================
   COMPACT VIDEO MODAL — ALL DEVICES
   ========================================================= */

.landing-demo-dialog {
  width: min(
    520px,
    calc(100vw - 64px),
    calc(100dvh - 100px)
  ) !important;

  max-width: 520px !important;
  max-height: calc(100dvh - 56px) !important;

  box-shadow: 6px 6px 0 #111111 !important;
}

.landing-demo-close {
  top: 8px !important;
  right: 8px !important;

  width: 34px !important;
  height: 34px !important;

  font-size: 18px !important;

  box-shadow: 3px 3px 0 #111111 !important;
}

@media (max-width: 820px) {
  .landing-demo-dialog {
    width: min(
      440px,
      76vw,
      calc(100dvh - 90px)
    ) !important;

    max-width: 76vw !important;
  }
}

@media (max-width: 620px) {
  .landing-demo-dialog {
    width: min(
      360px,
      72vw,
      calc(100dvh - 100px)
    ) !important;

    max-width: 72vw !important;
    max-height: calc(100dvh - 72px) !important;

    box-shadow: 4px 4px 0 #111111 !important;
  }

  .landing-demo-close {
    top: 7px !important;
    right: 7px !important;

    width: 31px !important;
    height: 31px !important;

    font-size: 17px !important;
  }

  .landing-continuity {
    width: 100% !important;
    max-width: none !important;
  }

  .landing-continuity-card {
    min-height: 180px !important;

    padding:
      14px
      16px !important;
  }

  .landing-continuity-icon {
    width: 35px !important;
    height: 35px !important;

    margin-bottom: 12px !important;
  }

  .landing-continuity-card p {
    margin-top: 8px !important;
  }
}

@media (max-width: 390px) {
  .landing-demo-dialog {
    width: min(
      320px,
      70vw,
      calc(100dvh - 96px)
    ) !important;

    max-width: 70vw !important;
  }
}


/* =========================================================
   FINAL CONTACT CTA
   ========================================================= */

.landing-contact-cta {
  position: relative;

  width: min(1320px, 100%);

  margin:
    clamp(72px, 8vw, 118px)
    auto
    8px;

  min-height: 330px;

  padding:
    clamp(54px, 6vw, 78px)
    clamp(24px, 5vw, 60px);

  border: 2px solid #111111;
  border-radius: 0;

  background: #ffffff;

  box-shadow: 7px 7px 0 #111111;

  overflow: hidden;
  isolation: isolate;

  box-sizing: border-box;
}

.landing-contact-cta-inner {
  position: relative;
  z-index: 3;

  max-width: 760px;

  margin: 0 auto;

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

  text-align: center;
}

.landing-contact-label {
  width: fit-content;

  margin-bottom: 16px;

  padding: 7px 11px;

  border: 2px solid #111111;

  background: #ffffff;

  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.07em;

  text-transform: uppercase;

  box-shadow: 3px 3px 0 #111111;
}

.landing-contact-cta h2 {
  max-width: 780px;

  margin: 0;

  color: #111111;

  font-size: clamp(36px, 4.5vw, 62px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.landing-contact-cta h2 span {
  display: inline;

  padding:
    0
    0.08em
    0.045em;

  background: var(--yellow);

  font-style: italic;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.landing-contact-cta p {
  max-width: 600px;

  margin:
    16px
    auto
    0;

  color: #4a535f;

  font-size: 14px;
  font-weight: 620;
  line-height: 1.55;
}

.landing-contact-button {
  min-height: 44px;

  margin-top: 24px;

  padding: 0 18px;

  border: 2px solid #111111;
  border-radius: 0;

  background: var(--yellow);
  color: #111111;

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

  gap: 9px;

  font-size: 11px;
  font-weight: 950;
  line-height: 1;

  text-transform: uppercase;
  text-decoration: none;

  box-shadow: 3px 3px 0 #111111;

  transform: translate(0,0);

  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.landing-contact-button:hover {
  background: var(--green);

  transform: translate(-1px,-1px);

  box-shadow: 4px 4px 0 #111111;
}

.landing-contact-button:active {
  transform: translate(1px,1px);

  box-shadow: 1px 1px 0 #111111;
}


/* Decorative curves remain clipped inside the CTA. */

.landing-contact-curve {
  position: absolute;
  z-index: 0;

  width: 42%;
  height: 160px;

  fill: none;

  stroke: #df7955;
  stroke-width: 2.2;
  stroke-linecap: round;

  opacity: 0.82;

  pointer-events: none;
}

.landing-contact-curve--left {
  left: -55px;
  top: -30px;
}

.landing-contact-curve--right {
  right: -58px;
  bottom: -32px;

  transform: scaleX(-1);
}


/* Small clean star accents, contained inside section. */

.landing-contact-spark {
  position: absolute;
  z-index: 1;

  width: 32px;
  height: 32px;

  background: currentColor;

  clip-path: polygon(
    50% 0%,
    61% 38%,
    100% 50%,
    61% 62%,
    50% 100%,
    39% 62%,
    0 50%,
    39% 38%
  );

  pointer-events: none;
}

.landing-contact-spark--one {
  top: 54px;
  right: 12%;

  color: #9ee49f;

  transform: rotate(14deg);
}

.landing-contact-spark--two {
  left: 10%;
  bottom: 48px;

  width: 22px;
  height: 22px;

  color: #f19c7e;

  transform: rotate(-9deg);
}


@media (max-width: 820px) {
  .landing-contact-cta {
    min-height: 300px;

    padding:
      50px
      22px;
  }

  .landing-contact-curve {
    width: 65%;
  }
}

@media (max-width: 620px) {
  .landing-contact-cta {
    width: 100%;

    margin-top: 64px;

    min-height: 280px;

    padding:
      44px
      18px;

    box-shadow: 5px 5px 0 #111111;
  }

  .landing-contact-cta h2 {
    font-size: clamp(31px, 9vw, 42px);
  }

  .landing-contact-cta p {
    font-size: 12.5px;
  }

  .landing-contact-label {
    font-size: 9px;
  }

  .landing-contact-curve {
    width: 92%;
    height: 120px;

    opacity: 0.65;
  }

  .landing-contact-spark--one {
    right: 5%;
    top: 40px;
  }

  .landing-contact-spark--two {
    left: 5%;
    bottom: 35px;
  }
}


/* =========================================================
   V17 — IMAGE CARDS + CLEAN CONTACT CTA
   ========================================================= */

/* Reduce gap between the coral section and final CTA */
.landing-contact-cta {
  margin-top: clamp(40px, 4.5vw, 64px) !important;
}


/* ---------------------------------------------------------
   AFTER THE ANALYSIS — image-led cards
   --------------------------------------------------------- */

.landing-continuity-card--media {
  min-height: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  overflow: hidden !important;
}

.landing-continuity-media {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  border-bottom: 2px solid #111111;

  background: #eceef1;

  overflow: hidden;
}

.landing-continuity-media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}

.landing-continuity-card-copy {
  flex: 1 1 auto;

  padding:
    16px
    18px
    17px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.landing-continuity-card-label {
  display: block;

  margin-bottom: 7px;

  color: #737b86;

  font-size: 8px;
  font-weight: 950;
  line-height: 1;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landing-continuity-card--media h3 {
  margin: 0 !important;

  font-size: clamp(20px, 1.8vw, 26px) !important;
}

.landing-continuity-card--media p {
  margin-top: 8px !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* ---------------------------------------------------------
   CONTACT CTA — no border, no shadow, tighter yellow accent
   --------------------------------------------------------- */

.landing-contact-cta {
  position: relative;

  width: min(1320px, 100%) !important;

  min-height: 300px !important;

  padding:
    clamp(46px, 5vw, 66px)
    clamp(24px, 5vw, 60px) !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}

.landing-contact-cta-inner {
  max-width: 760px;
}

.landing-contact-label {
  display: none !important;
}

.landing-contact-cta h2 {
  max-width: 760px;

  font-size: clamp(36px, 4.3vw, 60px) !important;
  line-height: 0.97 !important;
}

.landing-contact-cta h2 span {
  display: inline-block !important;

  padding:
    0
    0.075em
    0.025em !important;

  line-height: 0.9 !important;

  background: var(--yellow);

  font-style: italic;

  transform: translateY(-1px);
}


/* Contact curves now enter from the PAGE edges,
   not from the CTA block edges. */

.landing-contact-curve {
  position: absolute;

  width: 44vw !important;
  max-width: 620px;

  height: 150px !important;

  overflow: visible;

  pointer-events: none;
}

.landing-contact-curve--left {
  left: calc(50% - 50vw) !important;
  top: -24px !important;
}

.landing-contact-curve--right {
  right: calc(50% - 50vw) !important;
  bottom: -28px !important;
}


/* keep decorative stars subtle */
.landing-contact-spark--one {
  right: 12% !important;
  top: 34px !important;
}

.landing-contact-spark--two {
  left: 11% !important;
  bottom: 34px !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 820px) {
  .landing-continuity-card-copy {
    padding:
      15px
      17px
      16px;
  }

  .landing-contact-cta {
    margin-top: 42px !important;

    min-height: 280px !important;

    padding:
      42px
      18px !important;
  }

  .landing-contact-curve {
    width: 62vw !important;
  }
}

@media (max-width: 620px) {
  .landing-continuity-media {
    aspect-ratio: 16 / 8.7;
  }

  .landing-continuity-card-copy {
    padding:
      14px
      15px
      15px;
  }

  .landing-continuity-card--media h3 {
    font-size: 23px !important;
  }

  .landing-continuity-card--media p {
    font-size: 11.5px !important;
  }

  .landing-contact-cta {
    width: 100% !important;

    margin-top: 36px !important;

    min-height: 255px !important;

    padding:
      38px
      14px !important;
  }

  .landing-contact-cta h2 {
    font-size: clamp(30px, 8.5vw, 40px) !important;
  }

  .landing-contact-cta p {
    margin-top: 13px !important;
  }

  .landing-contact-button {
    margin-top: 20px !important;
  }

  .landing-contact-curve {
    width: 82vw !important;
    height: 110px !important;
  }

  .landing-contact-curve--left {
    top: -12px !important;
  }

  .landing-contact-curve--right {
    bottom: -15px !important;
  }

  .landing-contact-spark--one {
    right: 4% !important;
    top: 26px !important;
  }

  .landing-contact-spark--two {
    left: 4% !important;
    bottom: 26px !important;
  }
}


/* =========================================================
   V18 — HERO SIZE + MICRO CHECKS + IMAGE CARD REFINEMENT
   ========================================================= */

/* ---------------------------------------------------------
   HERO: enlarge the product visual before the layout stacks.
   Roughly 5% smaller than a full-width right-column treatment.
   --------------------------------------------------------- */

@media (min-width: 1121px) {
  .landing-hero-grid {
    grid-template-columns:
      minmax(350px, 0.82fr)
      minmax(560px, 1.18fr) !important;

    gap: clamp(44px, 4.2vw, 68px) !important;
  }

  .landing-hero-product {
    width: 95% !important;

    justify-self: end !important;

    padding:
      24px
      10px
      34px
      14px !important;
  }
}


/* ---------------------------------------------------------
   CHECKS UNDER HERO BUTTONS
   --------------------------------------------------------- */

.landing-hero-micro {
  margin-top: 17px;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap:
    10px
    18px;

  color: #59616c;

  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.landing-hero-micro span {
  display: inline-flex;
  align-items: center;

  gap: 6px;
}

.landing-hero-micro svg {
  width: 14px;
  height: 14px;

  color: var(--green-dark);

  stroke: currentColor;
  stroke-width: 3;
}


/* ---------------------------------------------------------
   AFTER THE ANALYSIS — image should sit INSIDE the card,
   not consume half the card edge-to-edge.
   --------------------------------------------------------- */

.landing-continuity-card--media {
  padding:
    14px
    14px
    0 !important;

  background: #ffffff;
}

.landing-continuity-media {
  width: 100%;

  aspect-ratio: 16 / 7.2 !important;

  border:
    1.5px
    solid
    #111111 !important;

  border-radius: 6px !important;

  background: #eceef1;

  overflow: hidden;

  box-sizing: border-box;
}

.landing-continuity-media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border-radius: 4px;
}

.landing-continuity-card-copy {
  padding:
    15px
    5px
    17px !important;
}

.landing-continuity-card-label {
  margin-bottom: 6px !important;
}


/* ---------------------------------------------------------
   TABLET
   Keep hero visual large until the actual stack breakpoint.
   --------------------------------------------------------- */

@media (min-width: 821px) and (max-width: 1120px) {
  .landing-hero-product {
    width: min(760px, 92%) !important;

    padding:
      24px
      20px
      38px !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 620px) {
  .landing-hero-micro {
    justify-content: center;

    margin-top: 15px;

    gap:
      7px
      14px;

    font-size: 9px;
  }

  .landing-hero-micro svg {
    width: 12px;
    height: 12px;
  }

  .landing-continuity-card--media {
    padding:
      11px
      11px
      0 !important;
  }

  .landing-continuity-media {
    aspect-ratio: 16 / 7.4 !important;

    border-radius: 5px !important;
  }

  .landing-continuity-media img {
    border-radius: 3px;
  }

  .landing-continuity-card-copy {
    padding:
      13px
      4px
      14px !important;
  }
}


/* =========================================================
   V19 — AFTER THE ANALYSIS CARD CLEANUP
   ========================================================= */

/* Slightly more room between cards */
.landing-continuity-grid {
  gap: clamp(20px, 2vw, 26px) !important;
}


/* Cards are a little more substantial */
.landing-continuity-card--media {
  min-height: 0 !important;

  padding:
    12px
    12px
    0 !important;

  background: #ffffff;
}


/* Screenshot:
   user prepares images around 1200 × 650,
   so match that ratio instead of using the old shallow crop. */
.landing-continuity-media {
  width: 100%;

  aspect-ratio: 1200 / 650 !important;

  border: 0 !important;
  border-radius: 7px !important;

  background: #eef0f2;

  overflow: hidden;
}

.landing-continuity-media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
  border-radius: 7px !important;
}


/* More compact text area without the mini title */
.landing-continuity-card-copy {
  padding:
    16px
    6px
    18px !important;
}

.landing-continuity-card--media h3 {
  margin: 0 !important;

  font-size: clamp(22px, 1.9vw, 28px) !important;
  line-height: 1 !important;
}

.landing-continuity-card--media p {
  margin-top: 9px !important;

  font-size: 12.5px !important;
  line-height: 1.45 !important;
}


/* Hide old label styles in case stale HTML/cache remains */
.landing-continuity-card-label {
  display: none !important;
}


/* Tablet */
@media (max-width: 820px) {
  .landing-continuity-card--media {
    padding:
      11px
      11px
      0 !important;
  }

  .landing-continuity-media {
    aspect-ratio: 1200 / 650 !important;
  }

  .landing-continuity-card-copy {
    padding:
      14px
      5px
      16px !important;
  }
}


/* Mobile */
@media (max-width: 620px) {
  .landing-continuity-grid {
    gap: 18px !important;
  }

  .landing-continuity-card--media {
    padding:
      10px
      10px
      0 !important;
  }

  .landing-continuity-media {
    aspect-ratio: 1200 / 650 !important;

    border-radius: 6px !important;
  }

  .landing-continuity-media img {
    border-radius: 6px !important;
  }

  .landing-continuity-card-copy {
    padding:
      13px
      4px
      15px !important;
  }

  .landing-continuity-card--media h3 {
    font-size: 23px !important;
  }

  .landing-continuity-card--media p {
    font-size: 11.8px !important;
  }
}


/* =========================================================
   V20 — FINAL AFTER-ANALYSIS IMAGE PATH / CARD ORDER
   ========================================================= */

.landing-continuity-card-label {
  display: none !important;
}

.landing-continuity-media {
  background: #eef0f2;
}

.landing-continuity-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* =========================================================
   V21 — TOP SOCIAL TICKER / FINAL
   ========================================================= */

.landing-social-banner {
  position: relative !important;
  z-index: 50 !important;

  flex: 0 0 auto !important;
  align-self: stretch !important;

  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: var(--lime) !important;
  color: #111111 !important;

  display: block !important;

  overflow: hidden !important;

  text-decoration: none !important;
  box-shadow: none !important;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 18px,
    #000 calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 18px,
    #000 calc(100% - 18px),
    transparent 100%
  );

  transition: background-color 0.16s ease;
}

.landing-social-banner:hover {
  background: var(--lime-hover) !important;
  color: #111111 !important;
}

.landing-social-track {
  width: max-content !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  animation: landingSocialTicker 24s linear infinite !important;

  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.landing-social-group {
  flex: 0 0 auto !important;

  height: 100% !important;

  display: flex !important;
  align-items: center !important;

  gap: 22px !important;

  padding: 0 22px !important;

  white-space: nowrap !important;

  font-family: inherit;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
}

.landing-social-item {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 9px;

  white-space: nowrap;
}

.landing-social-star {
  flex: 0 0 auto;

  color: #e33d49;

  font-size: 14px;
  line-height: 1;

  transform: rotate(-8deg);
}

.landing-social-gift {
  flex: 0 0 auto;

  width: 15px !important;
  height: 15px !important;

  color: #111111;

  stroke: currentColor;
  stroke-width: 2.5;
}

.landing-social-dot {
  flex: 0 0 auto;

  display: inline-block;

  margin: 0 !important;

  color: #111111;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1;
}

@keyframes landingSocialTicker {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.landing-social-banner:hover .landing-social-track {
  animation-play-state: running !important;
}

.landing-social-banner-star,
.landing-social-banner-text,
.landing-social-banner-end {
  display: none !important;
}

@media (max-width: 620px) {

  .landing-social-banner {
    height: 42px !important;
    min-height: 42px !important;

    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 12px,
      #000 calc(100% - 12px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 12px,
      #000 calc(100% - 12px),
      transparent 100%
    );
  }

  .landing-social-track {
    animation-duration: 19s !important;
  }

  .landing-social-group {
    gap: 16px !important;

    padding: 0 16px !important;

    font-size: 12px !important;
  }

  .landing-social-item {
    gap: 7px;
  }

  .landing-social-star {
    font-size: 13px;
  }

  .landing-social-gift {
    width: 14px !important;
    height: 14px !important;
  }

  .landing-social-dot {
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-social-track {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   V22 — ROBUST SOCIAL TICKER
   JS measures the exact segment width, so CSS must not
   animate the track itself.
   ========================================================= */

.landing-social-banner {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.landing-social-track {
  width: max-content !important;
  min-width: max-content !important;

  display: flex !important;
  align-items: center !important;

  gap: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  animation: none !important;

  will-change: transform;
}

.landing-social-group {
  flex: 0 0 auto !important;

  display: flex !important;
  align-items: center !important;

  gap: 22px !important;

  margin: 0 !important;
  padding: 0 22px !important;

  white-space: nowrap !important;
}

@media (max-width: 620px) {
  .landing-social-group {
    gap: 16px !important;
    padding: 0 16px !important;

    font-size: 12px !important;
  }
}


/* =========================================================
   CONTACT BUTTON — GREEN BY DEFAULT
   ========================================================= */

.landing-contact-button {
  background: var(--green) !important;
  color: #111111 !important;
}

.landing-contact-button:hover {
  background: #58c982 !important;
  color: #111111 !important;

  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #111111;
}

.landing-contact-button:active {
  background: #4fbd78 !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #111111;
}