/* KOTOWARI Partners Instagram service — corrective pass, 2026-08-24.
   Loaded after the existing published bundle: intentionally narrow in scope. */

/* 01: never crop the descender in the gradient Instagram word. */
.ip-page .hero,
.ip-page .hero-copy,
.ip-page #hero-title,
.ip-page .headline-accent,
.ip-page .instagram-word {
  overflow: visible;
}

.ip-page .headline-accent {
  align-items: baseline;
  min-height: 1.2em;
  line-height: 1.2;
  padding-bottom: .11em;
}

.ip-page .instagram-word {
  line-height: 1.2;
  padding-bottom: .11em;
}

/* 02: fixed, readable two-line authority headline, including compact phones. */
.ip-page .profile-authority h2 .profile-authority__title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .ip-page .profile-authority h2 {
    font-size: clamp(22px, 7.4vw, 36px);
    line-height: 1.32;
    letter-spacing: -.035em;
  }
}

/* 03: separate each timeline label from the illustration with high-contrast chips. */
.ip-page .feature-timeline {
  overflow: visible;
  isolation: isolate;
}

.ip-page .feature-timeline > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ip-page .feature-timeline__labels {
  z-index: 2;
  align-items: center;
}

.ip-page .feature-timeline__labels span {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75em;
  padding: .14em .48em;
  border: 1px solid rgba(215, 41, 150, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 13px rgba(77, 30, 110, .13);
  color: #a31988;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.ip-page .feature-timeline__labels span:first-child { color: #d95142; border-color: rgba(217, 81, 66, .28); }
.ip-page .feature-timeline__labels span:last-child { color: #7028bc; border-color: rgba(112, 40, 188, .3); }

.ip-page .feature-timeline > strong {
  z-index: 2;
  padding: .2em .5em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 5px 13px rgba(77, 30, 110, .1);
  color: #bd197b;
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 560px) {
  .ip-page .feature-timeline__labels {
    top: 77px;
    right: 7%;
    left: 5%;
    width: auto;
    font-size: clamp(8px, 2.55vw, 11px);
  }

  .ip-page .feature-timeline__labels span {
    padding: .18em .35em;
  }

  .ip-page .feature-timeline > strong {
    right: 5px;
    bottom: -3px;
    font-size: clamp(12px, 3.75vw, 15px);
  }
}

/* 04: reserve a clear column for the growth artwork on large screens and stack it on phones. */
.ip-page .price__heading-wrap {
  min-height: 190px;
  padding-right: min(22vw, 240px);
  isolation: isolate;
}

.ip-page .price__heading-wrap h2 {
  position: relative;
  z-index: 2;
}

.ip-page .price__art {
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 560px) {
  .ip-page .price__heading-wrap {
    display: grid;
    min-height: 0;
    padding-right: 0;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 28vw);
    align-items: end;
  }

  .ip-page .price__heading-wrap h2 {
    grid-column: 1 / -1;
  }

  .ip-page .price__art {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: min(30vw, 126px);
    height: auto;
    margin-top: 12px;
  }
}

/* 05: restore intentional service icons inside their round containers. */
.ip-page .contact__services li > span {
  display: grid;
  width: 105px;
  height: 105px;
  place-items: center;
  border: 2px solid #e8e9ee;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 44, 84, .1);
}

.ip-page .contact__services li > span i {
  display: block;
  width: auto;
  height: auto;
  background: none;
  color: #a832d0;
  font-size: 46px;
  line-height: 1;
  -webkit-text-fill-color: currentColor;
}

.ip-page .contact__services li:nth-child(1) > span { border-color: #d5e6fb; }
.ip-page .contact__services li:nth-child(1) > span i { color: #236bd4; }
.ip-page .contact__services li:nth-child(2) > span { border-color: #ffe1d3; }
.ip-page .contact__services li:nth-child(2) > span i { color: #f06c4c; }
.ip-page .contact__services li:nth-child(3) > span { border-color: #efd9fb; }
.ip-page .contact__services li:nth-child(3) > span i { color: #b638bd; }

@media (max-width: 560px) {
  .ip-page .contact__services li > span {
    width: min(25vw, 88px);
    height: min(25vw, 88px);
  }

  .ip-page .contact__services li > span i {
    font-size: clamp(30px, 9vw, 42px);
  }
}

/* 06: standard green checks and danger-red problem statements. */
.ip-page .worry-check {
  border: 3px solid #dff3e5;
  border-radius: 50%;
  background: #22a64d;
  box-shadow: 0 5px 12px rgba(25, 128, 60, .22);
  color: #fff;
}

.ip-page .worry-check i {
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

.ip-page .worry-card strong {
  background: none;
  color: #cf1e3f;
  font-weight: 900;
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 560px) {
  .ip-page .worry-check {
    width: 43px;
    height: 43px;
    border-width: 2px;
    font-size: 22px;
  }

  .ip-page .worry-card strong {
    color: #ce1838;
  }
}
