/* Agora Vertical — problem statement 14342:9069 and features 14353:83104.
   Surface colors follow the Figma frames and their card fills. */
.figma-layout #problems,
.figma-layout #features {
  padding: 120px 0;
  background: var(--page);
}

.figma-layout #features { background: var(--surface); }

.figma-layout #problems .section-heading {
  margin-bottom: 48px;
}

.figma-layout #problems h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.figma-layout #problems .problem-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.figma-layout #problems .problem-grid article {
  display: block;
  min-height: 300px;
  padding: 20px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
}

.figma-layout #problems .problem-grid .number {
  padding: 0;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

.figma-layout #problems .problem-grid h3 {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
}

.figma-layout #problems .problem-grid p {
  max-width: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
}

.figma-layout #features .section-heading {
  max-width: none;
  margin-bottom: 72px;
}

.figma-layout #features .section-heading h2 {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
}

.figma-layout #features .section-heading > p {
  margin-top: 16px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}

.figma-layout #features .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.figma-layout #features .feature-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  min-width: 0;
  max-width: none;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-white);
}

.figma-layout #features .card-content {
  width: 100%;
  min-height: 80px;
  gap: 8px;
}

.figma-layout #features .card-copy {
  gap: 8px;
}

.figma-layout #features .card-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.figma-layout #features .card-body {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.figma-layout #features .feature-visual {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  margin-top: auto;
  aspect-ratio: 582 / 380;
}

.figma-layout #features .feature-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--surface-white);
}

.figma-layout #features .feature-image {
  position: absolute;
  left: var(--image-left, 0%);
  top: var(--image-top, 0%);
  display: block;
  width: var(--image-width, 100%);
  height: var(--image-height, 100%);
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Figma image transforms, relative to each clipped media frame.
   Keep the original files intact for the full-image dialog. */
.figma-layout #features .feature-visual:has(.feature-media--session) {
  aspect-ratio: 582 / 379;
}
.figma-layout #features .feature-media--session {
  --image-top: -0.16%;
  --image-height: 100.07%;
}
.figma-layout #features .feature-media--library {
  --image-left: -20.35%;
  --image-width: 120.38%;
}
.figma-layout #features .feature-media--agents {
  --image-left: -3.55%;
  --image-width: 125.97%;
  --image-height: 108.42%;
}

.figma-layout #features .feature-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24px;
  border: 0;
  background: var(--surface-white);
  text-align: center;
}

.figma-layout #features .feature-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.65cqw, 9.6px);
  height: clamp(34px, 8.25cqw, 48px);
  max-width: calc(100% - 16px);
  padding: 0 clamp(8px, 2.475cqw, 14.4px);
  border: 1.62px solid var(--stroke);
  border-radius: 9.6px;
  background: var(--surface-white);
  box-shadow: 0 0 9.6px #00000026, 0 0 19.2px #0000000d;
  color: var(--primary);
  font-family: Pretendard, sans-serif;
  font-size: clamp(12px, 3.3cqw, 19.2px);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* Chip SVGs keep their authored 24 × 24 intrinsic dimensions. */
.figma-layout #features .feature-chip > img {
  display: block;
  flex: 0 0 auto;
}

.figma-layout #features .feature-chip--chat {
  left: -2.234%;
  bottom: 10.526%;
}

.figma-layout #features .feature-chip--ai,
.figma-layout #features .feature-chip--calendar {
  top: 2.895%;
  right: -3.436%;
}

.figma-layout #features .feature-chip--upload {
  left: 4.296%;
  bottom: 9.211%;
}

.figma-layout #features .feature-chip--folder {
  top: 58.947%;
  right: -3.436%;
}

.figma-layout #features .feature-chip--bookmark {
  top: -6.316%;
  right: -3.436%;
}

.figma-layout #features .feature-chip--share {
  left: 12.887%;
  bottom: -4.211%;
}

.figma-layout #features .feature-chip--task {
  left: -2.921%;
  bottom: 10.526%;
}

.figma-layout #features .file-badge {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 16px #00000026, 0 0 32px #0000000d;
}

.figma-layout #features .file-badge--word {
  top: 2.632%;
  left: 1.718%;
  width: clamp(36px, 10.481cqw, 61px);
}

.figma-layout #features .file-badge--ppt {
  top: 6.053%;
  left: 63.402%;
  width: clamp(30px, 8.247cqw, 48px);
}

.figma-layout #features .file-badge--excel {
  top: 26.842%;
  left: 50%;
  width: clamp(30px, 8.247cqw, 48px);
}

.figma-layout #features .file-badge--code {
  top: 81.316%;
  left: 62.199%;
  width: clamp(36px, 10.653cqw, 62px);
}

@media (width <= 1200px) {
  .figma-layout #problems .problem-grid h3 { font-size: 23px; }
  .figma-layout #problems .problem-grid p { font-size: 17px; }
}

@media (width <= 960px) {
  .figma-layout #problems,
  .figma-layout #features { padding: 80px 0; }
  .figma-layout #problems .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figma-layout #problems .problem-grid article { min-height: 240px; padding: 24px; }
  .figma-layout #features .section-heading h2 { font-size: 48px; }
  .figma-layout #features .section-heading > p { font-size: 22px; line-height: 1.4; }
  .figma-layout #features .section-heading { margin-bottom: 48px; }
  .figma-layout #features .feature-card { padding: 20px; }
  .figma-layout #features .card-title { font-size: 20px; }
  .figma-layout #features .card-body { font-size: 16px; }
  .figma-layout #features .feature-chip--bookmark { top: 0; }
  .figma-layout #features .feature-chip--share { bottom: 0; }
}

@media (width <= 720px) {
  .figma-layout #problems,
  .figma-layout #features { padding: 48px 0; }
  .figma-layout #problems .section-heading { margin-bottom: 24px; }
  .figma-layout #problems h2 { font-size: 24px; line-height: 1.4; }
  .figma-layout #problems .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .figma-layout #problems .problem-grid article { min-height: 0; padding: 24px; }
  .figma-layout #problems .problem-grid .number { font-size: 24px; margin-bottom: 20px; }
  .figma-layout #problems .problem-grid h3 { font-size: 22px; }
  .figma-layout #problems .problem-grid h3 br { display: block; }
  .figma-layout #problems .problem-grid p { font-size: 16px; }
  .figma-layout #features .section-heading { margin-bottom: 32px; }
  .figma-layout #features .section-heading h2 { font-size: 32px; line-height: 1.3; }
  .figma-layout #features .section-heading > p { font-size: 18px; }
  .figma-layout #features .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .figma-layout #features .feature-card { padding: 16px; gap: 20px; }
  .figma-layout #features .card-content { min-height: 0; }
  .figma-layout #features .card-title { font-size: 20px; }
  .figma-layout #features .card-body { font-size: 16px; }
  .figma-layout #features .feature-chip { height: clamp(34px, 8.25cqw, 38px); font-size: clamp(12px, 3.3cqw, 14px); }
  .figma-layout #features .feature-chip--chat,
  .figma-layout #features .feature-chip--task { left: 8px; }
  .figma-layout #features .feature-chip--ai,
  .figma-layout #features .feature-chip--folder,
  .figma-layout #features .feature-chip--bookmark,
  .figma-layout #features .feature-chip--calendar { right: 8px; }
  .figma-layout #features .feature-chip--bookmark { top: 8px; }
  .figma-layout #features .feature-chip--share { left: 8px; bottom: 8px; }
}

@media (width < 360px) {
  .figma-layout #features .section-heading h2 { font-size: 28px; }
  .figma-layout #features .section-heading > p { font-size: 16px; }
  .figma-layout #features .card-title { font-size: 18px; }
}