/* Buddy: one frontal phone illustration beside four clear app benefits.
   Design variance 4 / motion 1 / density 3. Native CSS and Nexus tokens. */
.buddy-art-section {
  --buddy-accent: var(--blue);
  --buddy-glow-core: #0035f638;
  --buddy-glow-edge: #4279ff1c;
  --buddy-reflection-opacity: .34;
  background: #e8efff;
  border-bottom: 1px solid #cbd8f2;
}

:root[data-theme="dark"] .buddy-art-section {
  --buddy-accent: var(--yellow);
  --buddy-glow-core: #0035f680;
  --buddy-glow-edge: #245cff38;
  --buddy-reflection-opacity: .48;
  background: #0a123b;
  border-bottom-color: #26376a;
}

.buddy-art-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "device copy" "device features" "device access";
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 28px;
  align-items: start;
}

.buddy-art-layout > *,
.buddy-art-features > li,
.buddy-art-features > li > div {
  min-width: 0;
}

.buddy-art-copy {
  grid-area: copy;
  align-self: end;
}

.buddy-art-label {
  margin-bottom: 22px;
  color: var(--buddy-accent);
  font-size: 15px;
  font-weight: 500;
}

.buddy-art-copy h2 {
  max-width: 560px;
  font-size: clamp(40px, 4vw, 54px);
  line-height: 1.08;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.buddy-art-copy h2 span {
  color: var(--buddy-accent);
}

.buddy-art-intro {
  max-width: 520px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
}

.buddy-art-device {
  grid-area: device;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  margin: 0;
}

.buddy-art-device-image {
  display: block;
  width: 450px;
  max-width: 100%;
  height: 620px;
  margin-inline: auto;
  object-fit: contain;
  object-position: center;
}

/* Keep the original phone and logo geometry; reserve a separate strip below
   for the static reflection, including when the mobile width changes. */
.buddy-art-device .buddy-device-art {
  --buddy-reflection-height: clamp(56px, 8vw, 88px);
  isolation: isolate;
  margin-bottom: calc(var(--buddy-reflection-height) + 12px);
}

.buddy-device-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 0 3%;
  background: radial-gradient(ellipse at 50% 55%, var(--buddy-glow-core) 0%, var(--buddy-glow-edge) 44%, transparent 73%);
  pointer-events: none;
}

.buddy-device-reflection {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  height: var(--buddy-reflection-height);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--buddy-reflection-opacity);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #0009 42%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #0009 42%, transparent 100%);
}

.buddy-device-reflection img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  transform: scaleY(-1);
  transform-origin: center;
  user-select: none;
}

.buddy-art-device figcaption {
  max-width: 320px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.buddy-art-features {
  grid-area: features;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.buddy-art-features > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.buddy-art-features .icon {
  width: 28px;
  height: 28px;
}

.buddy-art-features h3 {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.buddy-art-features p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
}

.buddy-art-access {
  grid-area: access;
  align-self: start;
}

.buddy-art-access .text-link {
  max-width: 100%;
  color: var(--ink);
  gap: 14px;
  font-size: 15px;
}

.buddy-art-access .icon {
  flex: none;
}

.buddy-art-access > p {
  margin-top: 6px;
  font-size: 13px;
}

@media (max-width: 1100px) {
  .buddy-art-layout { column-gap: 40px; }
  .buddy-art-copy h2 { font-size: 44px; }
  .buddy-art-features { gap: 24px 20px; }
}

@media (max-width: 900px) {
  .buddy-art-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "device" "features" "access";
    gap: 32px;
    max-width: 650px;
    margin-inline: auto;
  }
  .buddy-art-copy h2 { max-width: 620px; font-size: 46px; }
  .buddy-art-intro { max-width: 580px; }
  .buddy-art-device-image { width: 420px; height: 560px; }
  .buddy-art-features { gap: 28px 32px; }
}

@media (max-width: 767px) {
  .buddy-art-layout { gap: 28px; }
  .buddy-art-label { margin-bottom: 20px; font-size: 14px; }
  .buddy-art-copy h2 { font-size: 39px; max-width: 470px; }
  .buddy-art-intro { margin-top: 22px; }
  /* Trim only the transparent side margins on narrow screens; keep the device whole. */
  .buddy-art-device-image { width: 360px; height: 480px; object-fit: cover; }
  .buddy-art-device figcaption { margin-top: 12px; }
  .buddy-art-features { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .buddy-art-features > li { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
  .buddy-art-features h3 { font-size: 18px; }
  .buddy-art-features p { max-width: 420px; margin-top: 6px; font-size: 15px; }
}

@media (max-width: 374px) {
  .buddy-art-copy h2 { font-size: 36px; }
  .buddy-art-access .text-link { gap: 10px; font-size: 14px; }
}