/* Supplied construction photograph, cropped to cover the hero. The darker
   copy side keeps the introduction readable without flattening the photo. */
.hero {
  --hero-photo: url("assets/hero-construction-2560.webp");
  background-color: #14251c;
  background-image: none;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(8,22,15,.82) 0%, rgba(8,22,15,.67) 46%, rgba(8,22,15,.38) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--background-shift, 0px), 0);
}
.hero__title { color: #fffdf8; }
.hero__sub { color: rgba(255,253,248,.9); }
.hero__wordmark img { filter: brightness(0) invert(1); }
.hero__actions .btn {
  background: #fffdf8;
  border-color: #fffdf8;
  color: var(--color-accent);
  box-shadow: 0 2px 5px rgba(0,0,0,.13);
}
.hero__top .btn--quiet {
  color: #fffdf8;
  background: rgba(8,22,15,.35);
  border-color: rgba(255,253,248,.55);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero .btn:focus-visible,
.cta .btn:focus-visible { outline-color: #fffdf8; }
@media (hover: hover) and (pointer: fine) {
  .hero__actions .btn:hover { background: #eaf0e9; border-color: #eaf0e9; }
  .hero__top .btn--quiet:hover { background: rgba(8,22,15,.6); border-color: #fffdf8; }
}
@media (max-width: 59.99rem) {
  .hero { --hero-photo: url("assets/hero-construction-1920.webp"); }
  .hero::before {
    background-image:
      linear-gradient(180deg, rgba(8,22,15,.75) 0%, rgba(8,22,15,.62) 45%, rgba(8,22,15,.4) 100%),
      var(--hero-photo);
    background-position: 43% center;
  }
}

/* Larger, more legible product scene with sample completion photos. */
.hero .cd {
  max-width: 24rem;
}
.hero .cd-phone {
  width: 20rem;
  max-width: 100%;
  position: relative;
  isolation: isolate;
  height: 36.25rem;
  border: 6px solid #202622;
  border-radius: 2.625rem;
  background: var(--color-paper);
  box-shadow:
    0 0 0 1px #737a75,
    0 0 0 2px #28322c,
    0 2px 3px rgba(18,30,22,.15),
    0 24px 42px -23px rgba(18,30,22,.34),
    0 48px 68px -44px rgba(18,30,22,.22);
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: auto;
}
/* A fine inner seam separates the display glass from the chamfered frame. */
.hero .cd-phone::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 1px solid rgba(10,20,14,.3);
  border-radius: calc(2.625rem - 6px);
  box-shadow: inset 0 1px 2px rgba(9,18,12,.16);
  pointer-events: none;
}
.hero .cd-phone::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: .45rem;
  width: 5.25rem;
  height: .25rem;
  border-radius: 1rem;
  background: #1b251f;
  opacity: .8;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero .cd-phone__status {
  position: relative;
  min-height: 2.75rem;
  padding: .625rem 1.125rem .5rem;
}
.hero .cd-phone__status::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 50%;
  width: 4.875rem;
  height: 1.25rem;
  border-radius: 1rem;
  background:
    linear-gradient(#303933, #303933) 42% 50% / 1.25rem 2px no-repeat,
    #101612;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.65);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero .cd-phone__status::after {
  content: "";
  position: absolute;
  top: 1.025rem;
  left: calc(50% + 1.5rem);
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c5556, #14211d 65%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.035);
  pointer-events: none;
}
.hero .cd-phone__face { grid-template-rows: minmax(0, 1fr) auto; }
.hero .cd-thread {
  gap: .5rem;
  padding: .75rem .75rem .625rem;
  /* Hidden overflow permits programmatic storytelling scroll, without a nested
     wheel/touch scroll area that would interrupt normal page navigation. */
  overflow-y: hidden;
  overscroll-behavior: auto;
  touch-action: pan-y pinch-zoom;
}
.hero .cd-thread > :first-child { margin-top: 0; }
/* Fade only the narrow exit edge, beneath the fixed phone utility bar. The
   composer and the most recent message remain fully opaque. */
.hero .cd-phone__screen::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 14px;
  background: linear-gradient(var(--color-paper), transparent);
  pointer-events: none;
}
.hero .cd-sms {
  font-size: .875rem;
  line-height: 1.4;
  padding: .5rem .6875rem;
}
.hero .cd-message,
.hero .cd-sms { max-width: 90%; }
.hero .cd-message > .cd-sms { max-width: 100%; }
.hero .cd-message__receipt { font-size: .625rem; line-height: 1.3; }
.hero .cd-message__sender {
  justify-self: start;
  padding-left: .25rem;
  color: var(--color-muted);
  font-size: .625rem;
  line-height: 1.3;
}
.hero .cd-sms--out .cd-voice__text { color: inherit; }
.hero .cd-stamp { font-size: .6875rem; padding-top: .125rem; }
.hero .cd-composer { padding: .375rem .625rem 1.6rem; }
.hero .cd-composer__text {
  max-height: 2.8em;
  overflow-y: hidden;
  overscroll-behavior: auto;
}
.hero .cd-composer.is-recording .cd-composer__text::after { display: none; }

/* Photos arrive as an iOS-style attachment, separate from the text bubble.
   Real 4:3 geometry keeps the full front view visible and reserves its space. */
.hero .cd-message--in { align-self: flex-start; }
.hero .cd-message--photos { width: 90%; gap: .375rem; }
.hero .cd-message--photos > .cd-sms { width: auto; }
.hero .cd-message--in > .cd-sms { justify-self: start; }
.hero .cd-message--out > .cd-sms { justify-self: end; }
.hero .cd-photo-stack {
  position: relative;
  display: block;
  isolation: isolate;
  width: 11rem;
  max-width: calc(100% - .75rem);
  aspect-ratio: 4 / 3;
  margin: .75rem .375rem .125rem;
}
.hero .cd-message--in > .cd-photo-stack { justify-self: start; }
.hero .cd-message--out > .cd-photo-stack { justify-self: end; }
.hero .cd-photo-stack--review { width: 9rem; }
.hero .cd-photo-stack img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: .7rem;
  background: #e6e8dc;
  box-shadow: 0 1px 3px rgba(20,35,25,.17);
}
.hero .cd-photo-stack img:nth-child(1) { z-index: 4; }
.hero .cd-photo-stack img:nth-child(2) {
  z-index: 3;
  transform: translate(3px, -4px) rotate(3deg);
}
.hero .cd-photo-stack img:nth-child(3) {
  z-index: 2;
  transform: translate(-3px, -6px) rotate(-4deg);
}
.hero .cd-photo-stack img:nth-child(4) {
  z-index: 1;
  transform: translate(1px, -9px) rotate(1.5deg);
}
.hero .cd-photo-stack__count {
  position: absolute;
  z-index: 5;
  right: .375rem;
  bottom: .375rem;
  padding: .15rem .4rem;
  border-radius: .375rem;
  background: rgba(15,25,19,.72);
  color: #fff;
  font-size: .625rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .005em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero .cd-sms__url {
  font-weight: 400;
  text-decoration: none;
  cursor: default;
  overflow-wrap: anywhere;
}
.hero .cd-voice { gap: .5rem; }
.hero .cd-voice__time { font-size: .75rem; }

/* Keep the attached summary supportive rather than another large panel. */
.hero .cd-log {
  max-width: 22rem;
  width: 100%;
  padding: .875rem 1.125rem;
  margin-top: -.5rem;
  box-shadow: 0 2px 5px rgba(8,22,15,.08),
    0 16px 32px -12px rgba(8,22,15,.22);
}
.hero .cd-log__group { min-height: 0; gap: .5rem; }
.hero .cd-log__head { font-size: .8125rem; }
.hero .cd-log__list { gap: .375rem; }
.hero .cd-act { font-size: .75rem; line-height: 1.4; }
.hero .cd-act svg { width: .875rem; height: .875rem; }

@media (max-width: 24rem) {
  .hero .cd-thread { padding-inline: .625rem; }
  .hero .cd-log { padding: .875rem; }
}

/* Quiet product motion: let conversation changes settle without a pop. */
.hero .cd-thread {
  overflow-anchor: none;
  scroll-behavior: auto;
}
.hero .cd-phone__face {
  transition: opacity 280ms cubic-bezier(.22, 1, .36, 1),
    transform 280ms cubic-bezier(.22, 1, .36, 1);
}
.hero .cd-phone__face.is-leaving {
  opacity: 0;
  transform: translateX(-12px);
}
.hero .cd-phone__face.is-arriving {
  opacity: 0;
  transform: translateX(12px);
  transition: none;
}
.hero .cd .is-new {
  animation: cd-message-settle 480ms cubic-bezier(.22, 1, .36, 1) backwards;
}
.hero .cd-act__words--updated {
  animation: cd-summary-settle 220ms ease-out backwards;
}
.hero .cd.is-held .is-new,
.hero .cd.is-held .cd-act__words--updated {
  animation-play-state: paused;
}
@keyframes cd-message-settle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cd-summary-settle {
  from { opacity: .35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { transform: none; }
  .hero .cd-phone__face { transition: none; }
  .hero .cd .is-new,
  .hero .cd-act__words--updated { animation: none; }
}