/* Direct-image rendering for non-homepage content pages.
   The homepage now owns its hero and card geometry through hero-animation.css,
   home-ui-v4.css, review-path-cards.css and branding/components.css. */

body:not(.home-ui-v4):not(.home-start) .hero-art {
  position: relative;
  overflow: visible !important;
  background: none !important;
}

body:not(.home-ui-v4):not(.home-start) .hero-art__image {
  display: block;
  position: static;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  opacity: 1 !important;
  pointer-events: auto;
}

body:not(.home-ui-v4) .review-option::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

body:not(.home-ui-v4) .review-option__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  flex: 0 0 auto;
  background: #fff;
  border-bottom: 1px solid var(--line, #d8d8d4);
  image-rendering: auto;
}

.review-option > span:last-of-type {
  max-width: 100%;
  text-wrap: balance;
}

.section-lockup__art img[data-visual-role="headline-pose"] {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
}

@media (max-width: 980px) {
  body:not(.home-ui-v4):not(.home-start) .hero-art {
    width: min(100%, 780px);
    justify-self: center;
  }
}

@media (max-width: 720px) {
  body:not(.home-ui-v4):not(.home-start) .hero-art {
    width: calc(100% + 1rem);
    margin-inline: -.5rem;
  }
}

/* Shared content hero mobile repair.
   Once a content hero collapses to one column, the illustration and aside must
   become a vertical stack. The base component previously left the visual as a
   horizontal flex row, causing the full-width aside to sit beside the image and
   overflow/clamp on narrow screens. */
@media (max-width: 980px) {
  body:not(.home-ui-v4) .content-hero__visual {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 0;
    overflow: visible;
  }

  body:not(.home-ui-v4) .content-hero__scene {
    flex: 0 0 auto;
    width: min(100%, 560px);
    margin-inline: auto;
  }

  body:not(.home-ui-v4) .content-hero__aside {
    position: static;
    right: auto;
    bottom: auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 1rem 0 0;
  }
}

@media (max-width: 720px) {
  body:not(.home-ui-v4) .content-hero {
    padding-top: clamp(3.75rem, 12vw, 4.75rem);
    padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }

  body:not(.home-ui-v4) .content-hero__inner {
    gap: 1.5rem;
  }

  body:not(.home-ui-v4) .content-hero h1 {
    max-width: none;
    font-size: clamp(2.9rem, 13vw, 3.8rem);
  }

  body:not(.home-ui-v4) .content-hero__aside {
    margin-top: .9rem;
    padding: 1rem;
    box-shadow: 5px 5px 0 rgba(17,17,17,.08);
  }
}

/* Sitewide text-link interaction: the underline is an action cue, so it draws
   from left to right in ballpoint blue instead of sitting under the link. */
.text-link::after {
  background: var(--ballpoint, #244aa5) !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.78,.22,1);
}

.text-link:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}

/* Canonical loose-line corners: each 18px edge asset stops at the centerline of
   the adjoining edge. This keeps the hand-drawn meeting point but removes the
   doubled/overdrawn corner tails sitewide. */
body[data-oob-experience] .content-hero__aside,
body[data-oob-experience] .decision-note,
body[data-oob-experience] .product-summary,
body[data-oob-experience] .review-guide,
body[data-oob-experience] .review-context,
body[data-oob-experience] .privacy-note,
body[data-oob-experience] .review-workspace,
body[data-oob-experience] .review-result,
body[data-oob-experience] .tool-form,
body[data-oob-experience] .fit-form,
body[data-oob-experience] .tool-result,
body[data-oob-experience] .fit-result,
body[data-oob-experience] .review-card,
body[data-oob-experience] .report,
body[data-oob-experience] .review-progress,
body[data-oob-experience='reviews-hub'] .review-library-card {
  background-position: 9px 0, 9px 100%, 0 9px, 100% 9px !important;
  background-size:
    calc(100% - 18px) 18px,
    calc(100% - 18px) 18px,
    18px calc(100% - 18px),
    18px calc(100% - 18px) !important;
  background-repeat: no-repeat !important;
}

/* AI Fit Check: keep the generated next-step plan out of the result and place
   the human invitation inside the existing sticky decision note. No wrapper,
   second box or sticky-position override is introduced here. */
.fit-result[data-fit-result] .fit-result-plan {
  display: none !important;
}

/* Preserve the original loose gray workfile outline around the complete result.
   The obsolete blue SVG pseudo-outline remains disabled in content-pages.css. */
body[data-oob-experience] .fit-result.fit-result--gift {
  background-image:
    url('/branding/line-top.svg?v=20260902-workfile'),
    url('/branding/line-bottom.svg?v=20260902-workfile'),
    url('/branding/line-left.svg?v=20260902-workfile'),
    url('/branding/line-right.svg?v=20260902-workfile') !important;
  background-position: 9px 0, 9px 100%, 0 9px, 100% 9px !important;
  background-size:
    calc(100% - 18px) 18px,
    calc(100% - 18px) 18px,
    18px calc(100% - 18px),
    18px calc(100% - 18px) !important;
  background-repeat: no-repeat !important;
}

.fit-check-section .decision-note .fit-human-eyebrow {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid #b7b7b1;
  color: var(--ballpoint, #244aa5) !important;
}

.fit-check-section .decision-note .fit-human-heading {
  max-width: 13ch;
  margin-bottom: .8rem;
  font-size: clamp(1.45rem, 2vw, 1.8rem);
  text-wrap: balance;
}

.fit-check-section .decision-note .fit-human-philosophy {
  margin-bottom: .85rem;
}

.fit-check-section .decision-note .fit-human-invite {
  margin-bottom: 1rem;
  color: var(--ink, #111) !important;
  font-weight: 700;
}

.fit-check-section .decision-note .fit-human-link {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Homepage pathway reveal trial.
   Illustration and CTA remain visible. The middle text panel gets a deliberately
   taller field so the blue state has room to act as a visual stop instead of
   reading like a small text highlight. */
.home-ui-v4 .review-path-card__front > .review-path-card__art,
.home-ui-v4 .review-path-card__front > .review-path-card__panel {
  position: relative;
  z-index: 1;
}

.home-ui-v4 .review-path-card__panel {
  min-height: clamp(255px, 22vw, 315px);
}

.home-ui-v4 .review-path-card__reveal {
  z-index: 20;
  inset: -1px clamp(8px, 1.2vw, 12px) 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: clamp(1.65rem, 3vw, 2.15rem) clamp(1.85rem, 4vw, 2.75rem);
  background-color: var(--ballpoint, #244aa5);
  transform: translateY(calc(100% + 22px));
  transition: transform .28s cubic-bezier(.2,.78,.22,1);
}

.home-ui-v4 .review-path-card__reveal p {
  max-width: 22ch !important;
  margin-top: 0 !important;
  font-size: clamp(1.35rem, 2.35vw, 1.95rem) !important;
  font-weight: 620;
  line-height: 1.16 !important;
  letter-spacing: -.02em;
}

/* The blue panel now meets the CTA strip directly. There is no secondary
   separator line; the tighter strip keeps the next action visually connected. */
.home-ui-v4 .review-path-card__back {
  gap: .45rem;
  padding-top: .45rem;
  padding-bottom: 1.05rem;
}

.home-ui-v4 .review-path-card__back::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.home-ui-v4 .review-path-card__back .eyebrow {
  margin: 0 0 .25rem;
}

@media (max-width: 980px) {
  .home-ui-v4 .review-path-card__panel {
    min-height: 245px;
  }

  .home-ui-v4 .review-path-card__reveal {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.55rem clamp(1.65rem, 6vw, 2.4rem) 2rem;
  }

  .home-ui-v4 .review-path-card__reveal p {
    max-width: 22ch !important;
    font-size: clamp(1.35rem, 5.25vw, 1.85rem) !important;
  }
}

@media (max-width: 620px) {
  .home-ui-v4 .review-path-card__panel {
    min-height: 255px;
  }

  .home-ui-v4 .review-path-card__reveal {
    padding: 1.5rem 1.65rem 2rem;
  }

  .home-ui-v4 .review-path-card__back {
    gap: .4rem;
    padding-top: .4rem;
    padding-bottom: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-link::after {
    transition: none;
  }

  .home-ui-v4 .review-path-card__reveal {
    transition: none !important;
  }
}