/* ==========================================================================
   Smartguard — Section: Understanding Comes First
   Uses only tokens already defined in UX-004-Design-Tokens.md. Nothing
   here introduces a new colour or a hard-coded spacing value.
   ========================================================================== */


#home-page .section-understanding,
#home-page .section-confidence {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  border-radius: 1rem;

  /* Alternate background per the site's long-form scroll rhythm — a
     step away from the Hero, not a hard cut. */
  background: var(--colour-section-alt);
}

#home-page .section-understanding .section-visual {
  position: absolute;
  top: calc(var(--space-xl) + var(--space-xl) + var(--space-xl) + var(--space-xl));
  left: calc(50% + 2rem);
  width: min(55rem, 45vw);
  aspect-ratio: 11 / 5;
  border-radius: 0.5rem;
  overflow: hidden;
  background-image: url("/images/screenshots/questions-01.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: perspective(1000px) rotateY(-10deg) scaleX(0.83);
  transform-origin: right center;
  box-shadow: 0 0 2.5rem oklch(from var(--colour-brand) l c h / 1);
}

@media (width <= 850px) {
  #home-page .section-understanding .section-visual {
    top: calc(var(--space-xl) + var(--space-xl) + var(--space-xl) + var(--space-lg) + var(--space-lg));
  }
}

 @media (width <= 1024px) {
  #home-page .section-understanding .section-visual {
    top: calc(var(--space-xl) + var(--space-xl) + var(--space-xl) + var(--space-lg) + 5rem) !important;
  }
}

#home-page .section-confidence .section-visual {
  position: absolute;
  top: min(calc(var(--space-xl) + var(--space-xl) + 4vw), 150px);
  right: calc(50% - 5rem);
  width: min(55rem, 46vw);
  aspect-ratio: 8 / 5;
  border-radius: 0.5rem;
  overflow: hidden;
  background-image: url("/images/screenshots/search-matter-selected.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: perspective(1000px) rotateY(8deg) scaleX(0.83);
  transform-origin: left center;
  box-shadow: 0 0 2.5rem oklch(from var(--colour-brand) l c h / 1);
}

@media (width <= 1280px) {
  #home-page .section-confidence .section-visual {
    top: min(calc(var(--space-xl) + var(--space-xl) + 30rem), 280px) !important;
  }
} 

 @media (width <= 1024px) {
  #home-page .section-confidence .section-visual {
    top: min(calc(var(--space-xl) + var(--space-xl) + 20rem), 230px) !important;
  }
} 

@media (max-width: 850px) {
  #home-page .section-visual, 
  #home-page aside {
    display: none;
  }
  .section-understanding.space-above-xl{
    margin-top: 1rem !important;
  }
}