/* more feature — Figma node 12935:3113 */

.sec-more-feature {
  background: var(--color-surface);
  padding-top: 132px;
}

.sec-more-feature__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

/* ---------- title ---------- */

.sec-more-feature__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sec-more-feature__heading {
  flex: 1 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -2px;
  text-align: center;
  color: var(--color-ink);
  word-break: break-word;
}

/* ---------- cards ---------- */

.sec-more-feature__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.sec-more-feature__card {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
}

.sec-more-feature__card--text-first {
  justify-content: space-between;
  padding-left: 56px;
}

.sec-more-feature__card--media-first {
  gap: 106px;
}

/* ---------- card copy ---------- */

.sec-more-feature__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: none;
}

.sec-more-feature__copy--gap32 {
  gap: 32px;
}

.sec-more-feature__copy--gap36 {
  gap: 36px;
}

.sec-more-feature__lede {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  word-break: break-word;
}

.sec-more-feature__card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: -1px;
  color: var(--color-ink);
}

.sec-more-feature__card-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
}

.sec-more-feature__card-desc--w375 {
  width: 375px;
}

.sec-more-feature__card-desc--w329 {
  width: 329px;
}

/* ---------- bullets ---------- */

.sec-more-feature__bullets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sec-more-feature__bullet {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-more-feature__check {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.sec-more-feature__check-icon {
  position: absolute;
  left: 16.67%;
  right: 16.67%;
  top: 25%;
  bottom: 29.17%;
}

.sec-more-feature__check-icon img {
  position: absolute;
  left: -7.03%;
  top: -10.23%;
  width: 114.06%;
  height: 120.46%;
  max-width: none;
}

.sec-more-feature__bullet-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
  white-space: nowrap;
  word-break: break-word;
}

/* ---------- media ---------- */

.sec-more-feature__media {
  position: relative;
  flex: none;
  width: 469px;
  height: 478px;
  overflow: hidden;
}

.sec-more-feature__media-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sec-more-feature__media-img {
  position: absolute;
  max-width: none;
}

.sec-more-feature__media-img--01 {
  left: -45.9%;
  top: -20.64%;
  width: 190.81%;
  height: 141%;
}

.sec-more-feature__media-img--02 {
  left: -17.94%;
  top: -0.21%;
  width: 135.89%;
  height: 100.42%;
}

.sec-more-feature__media-img--03 {
  left: -57.9%;
  top: -29.75%;
  width: 219.68%;
  height: 162.34%;
}

.sec-more-feature__widget {
  position: absolute;
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- widget 01: productivity ring ---------- */

.sec-more-feature__widget--ring {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sec-more-feature__ring-grid {
  position: relative;
  width: 307.16px;
  height: 140.16px;
}

.sec-more-feature__ring-label {
  position: absolute;
  left: 0;
  top: 10.16px;
  width: 117px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-ink);
  word-break: break-word;
}

.sec-more-feature__ring-track {
  position: absolute;
  left: 181.6px;
  top: 14.6px;
  width: 110.957px;
  height: 110.957px;
}

.sec-more-feature__ring-progress {
  position: absolute;
  left: 167px;
  top: 0;
  width: 140.159px;
  height: 140.159px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-more-feature__ring-progress-inner {
  position: relative;
  width: 110.957px;
  height: 110.957px;
  transform: rotate(-18.28deg);
}

.sec-more-feature__ring-progress-inner img {
  position: absolute;
  left: 0;
  top: 9.68%;
  width: 100%;
  height: 90.32%;
  max-width: none;
}

.sec-more-feature__ring-value {
  position: absolute;
  left: 211px;
  top: 56px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: var(--color-ink);
  white-space: nowrap;
}

.sec-more-feature__pill {
  position: absolute;
  left: 0;
  top: 94px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 15px;
  border-radius: 44px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  white-space: nowrap;
}

/* ---------- widget 02: chat ---------- */

.sec-more-feature__widget--chat {
  left: 73.16px;
  top: 75.16px;
  width: 323.799px;
  height: 327.502px;
  border: 1.058px solid rgba(59, 59, 59, 0.06);
}

.sec-more-feature__chat-head {
  position: absolute;
  left: 21.16px;
  top: 20.11px;
  display: flex;
  align-items: center;
  gap: 6.349px;
}

.sec-more-feature__chat-spark {
  position: relative;
  flex: none;
  width: 25.396px;
  height: 25.396px;
  overflow: hidden;
}

.sec-more-feature__chat-spark img {
  position: absolute;
  left: 13.63%;
  top: 6.25%;
  width: 72.73%;
  height: 87.5%;
  max-width: none;
}

.sec-more-feature__chat-head-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-accent);
  white-space: nowrap;
}

.sec-more-feature__chat-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8.465px 14.814px;
  border-radius: 8.465px;
  background: var(--color-surface);
}

.sec-more-feature__chat-bubble p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.814px;
  line-height: 1.7;
  color: var(--color-ink);
  word-break: break-word;
}

.sec-more-feature__chat-bubble--in {
  position: absolute;
  left: 24.34px;
  top: 65.61px;
}

.sec-more-feature__chat-bubble--in p {
  white-space: nowrap;
}

.sec-more-feature__chat-row {
  position: absolute;
  left: 66.66px;
  top: 129.1px;
  display: flex;
  align-items: flex-start;
  gap: 12.698px;
}

.sec-more-feature__chat-bubble--out {
  flex: none;
}

.sec-more-feature__chat-bubble--out p {
  width: 148.143px;
}

.sec-more-feature__chat-avatar {
  position: relative;
  flex: none;
  width: 40.21px;
  height: 40.21px;
  border-radius: 105.817px;
  overflow: hidden;
}

.sec-more-feature__chat-avatar img {
  position: absolute;
  left: -26.8%;
  top: -2.74%;
  width: 135.8%;
  height: 203.3%;
  max-width: none;
}

.sec-more-feature__chat-input {
  position: absolute;
  left: 24.34px;
  top: 250.79px;
  width: 273.007px;
  height: 50.792px;
  border: 1.058px solid rgba(59, 59, 59, 0.12);
  border-radius: 8.465px;
  overflow: hidden;
}

.sec-more-feature__chat-input-row {
  position: absolute;
  left: 15.88px;
  top: 11.64px;
  width: 239.145px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec-more-feature__chat-placeholder {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.814px;
  line-height: 1.7;
  color: var(--color-muted);
  opacity: 0.72;
  white-space: nowrap;
}

.sec-more-feature__chat-send {
  position: relative;
  flex: none;
  width: 19.047px;
  height: 19.047px;
  opacity: 0.72;
  overflow: hidden;
}

.sec-more-feature__chat-send img {
  position: absolute;
  left: 0;
  top: 6.54%;
  width: 100%;
  height: 86.92%;
  max-width: none;
}

/* ---------- widget 03: funnel chart ---------- */

.sec-more-feature__widget--chart {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 337px;
  padding: 21px 23px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sec-more-feature__chart-title {
  width: 254px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-ink);
  word-break: break-word;
}

.sec-more-feature__bars {
  display: flex;
  align-items: flex-end;
  gap: 13px;
  flex: none;
}

.sec-more-feature__bar {
  position: relative;
  flex: none;
  width: 48px;
  border-radius: 6px;
  background: var(--color-surface);
  overflow: hidden;
}

.sec-more-feature__bar--active {
  background: var(--color-accent);
}

.sec-more-feature__bar span {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
  color: var(--color-ink);
  white-space: nowrap;
}

.sec-more-feature__bar--active span {
  color: var(--color-white);
}

.sec-more-feature__months {
  position: relative;
  width: 292px;
  height: 27px;
  flex: none;
}

.sec-more-feature__month {
  position: absolute;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-muted);
  opacity: 0.8;
  white-space: nowrap;
}

.sec-more-feature__month--active {
  color: var(--color-ink);
  opacity: 1;
}

.sec-more-feature__chart-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 145px;
  width: 292px;
  height: 1.5px;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .sec-more-feature__inner {
    gap: 48px;
  }

  .sec-more-feature__heading {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .sec-more-feature__card,
  .sec-more-feature__card--text-first,
  .sec-more-feature__card--media-first {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 32px 24px;
  }

  .sec-more-feature__card--media-first {
    flex-direction: column-reverse;
  }

  .sec-more-feature__card-title {
    font-size: 28px;
  }

  .sec-more-feature__card-desc--w375,
  .sec-more-feature__card-desc--w329 {
    width: 100%;
  }

  .sec-more-feature__bullet-text {
    white-space: normal;
  }

  .sec-more-feature__media {
    width: 100%;
    max-width: 469px;
    margin-inline: auto;
  }
}

/*
 * Mobile: reproduce the composition at a smaller scale.
 *
 * The media box stops being 469px wide below ~565px, but `height: 478px` and
 * the widgets' pixel sizes never got an override, so the ring and the chart
 * bleed past both edges (losing their 16px corners and reading as a plain
 * white band) and the chat loses its avatar and send icon off the right.
 *
 * The desktop design keeps every widget at 69-76% of the media width, centred,
 * with a visible gradient margin on all four sides. Restoring that only needs
 * the widget shrunk by the same factor the media shrank: mediaWidth / 469.
 *
 * `transform` is applied AFTER the individual `scale` property, so leaving the
 * desktop `transform: translate(-50%, -50%)` in place would re-centre the
 * *unscaled* box and the widget would stay clipped by the original amount.
 * The centring has to move onto the individual `translate` property.
 */

@media (max-width: 560px) {
  .sec-more-feature__media {
    height: auto;
    aspect-ratio: 469 / 478;
    --mf-scale: 0.81;
  }

  .sec-more-feature__widget--ring,
  .sec-more-feature__widget--chart {
    transform: none;
    translate: -50% -50%;
    scale: var(--mf-scale);
  }

  /* anchored top-left, so its offsets scale with it */
  .sec-more-feature__widget--chat {
    transform-origin: top left;
    scale: var(--mf-scale);
    left: calc(73.16px * var(--mf-scale));
    top: calc(75.16px * var(--mf-scale));
  }
}

@media (max-width: 480px) {
  .sec-more-feature__media {
    --mf-scale: 0.71;
  }
}

@media (max-width: 430px) {
  .sec-more-feature__media {
    --mf-scale: 0.62;
  }
}

@media (max-width: 390px) {
  .sec-more-feature__media {
    --mf-scale: 0.56;
  }
}

@media (max-width: 360px) {
  .sec-more-feature__media {
    --mf-scale: 0.47;
  }
}

/*
 * Exact, step-free ratio where dividing a length by a length in calc() is
 * supported (Chrome 125+, Safari 18+, Firefox 129+). The stepped values above
 * are the fallback, each chosen to be safe at the low end of its band.
 */
@supports (scale: calc(1cqw / 1px)) {
  @media (max-width: 560px) {
    .sec-more-feature__media {
      container-type: inline-size;
    }

    .sec-more-feature__widget {
      --mf-scale: min(1, calc(100cqw / 469px));
    }
  }
}