:root {
  --ps-navy: #16265e;
  --ps-navy-soft: #2a3a72;
  --ps-pink: #e10d65;
  --ps-bg: #f6f5f3;
  --ps-white: #ffffff;
  --ps-pink-tint: #fdecf3;
  --ps-max-width: 880px;
  --ps-radius: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 50% 25%, #ffffff 0%, var(--ps-bg) 78%);
  color: var(--ps-navy);
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.poster {
  position: relative;
  width: 100%;
  max-width: var(--ps-max-width);
  background: var(--ps-white);
  box-shadow: 0 12px 48px rgba(22, 38, 94, 0.15);
  overflow: hidden;
}

.deco {
  position: absolute;
  width: 42%;
  max-width: 340px;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.deco__navy {
  fill: var(--ps-navy);
}

.deco__pink {
  fill: none;
  stroke: var(--ps-pink);
  stroke-width: 5;
}

.deco--tl {
  top: 0;
  left: 0;
}

.deco--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.deco--bl {
  bottom: 0;
  left: 0;
}

.deco--br {
  bottom: 0;
  right: 0;
  transform: scaleX(-1);
}

.notice {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 90px 44px 92px;
}

.logo {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.title {
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.title__sm {
  color: var(--ps-navy);
  font-size: clamp(26px, 6.2vw, 52px);
}

.title__md {
  color: var(--ps-navy);
  font-size: clamp(38px, 9.6vw, 78px);
  letter-spacing: -1px;
}

.title__lg {
  color: var(--ps-pink);
  font-size: clamp(30px, 8.2vw, 72px);
  letter-spacing: -0.5px;
}

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
}

.divider__line {
  flex: 1;
  height: 2px;
  background: var(--ps-pink);
}

.divider__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ps-pink);
  flex-shrink: 0;
}

.divider__badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ps-pink);
  color: var(--ps-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card {
  border-radius: var(--ps-radius);
  margin: 0 auto 20px;
}

.card--apology {
  background: var(--ps-pink-tint);
  border: 2px solid var(--ps-pink);
  padding: 20px 26px;
}

.card--apology__lead {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  margin-bottom: 8px;
}

.card--apology__text {
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: 400;
  line-height: 1.45;
}

.card--apology__text+.card--apology__text {
  margin-top: 4px;
}

.features {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--ps-navy);
  border-radius: var(--ps-radius);
  padding: 22px 10px;
  margin-bottom: 20px;
}

.feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 4px 16px;
}

.feature+.feature {
  border-left: 2px solid var(--ps-pink);
}

.feature__icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--ps-navy);
  color: var(--ps-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.25;
}

.t-navy {
  color: var(--ps-navy);
  font-weight: 900;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: 0.3px;
}

.t-pink {
  color: var(--ps-pink);
  font-weight: 900;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: 0.3px;
}

.t-muted {
  color: var(--ps-navy);
  font-weight: 400;
  font-size: clamp(13px, 1.8vw, 16px);
}

.card--credit {
  border: 2px solid var(--ps-navy);
  overflow: hidden;
  text-align: center;
}

.card--credit__header {
  background: var(--ps-navy);
  color: var(--ps-white);
  font-weight: 900;
  font-size: clamp(17px, 3.4vw, 26px);
  letter-spacing: 0.5px;
  padding: 13px 20px;
}

.card--credit__body {
  padding: 20px 26px 22px;
}

.card--credit__intro {
  font-size: clamp(14px, 2.4vw, 19px);
  line-height: 1.4;
  margin-bottom: 16px;
}

.card--credit__intro strong {
  font-weight: 700;
}

.bank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  text-align: left;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ecd7e2;
}

.bank__logo {
  font-size: clamp(38px, 8vw, 62px);
  font-weight: 900;
  font-style: italic;
  color: var(--ps-navy);
  letter-spacing: -1px;
  padding-right: 26px;
  border-right: 2px solid #c6cbdd;
}

.bank__data {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bank__row {
  display: flex;
  gap: 10px;
  font-size: clamp(13px, 2.2vw, 18px);
}

.bank__row dt {
  color: var(--ps-navy-soft);
  min-width: 104px;
}

.bank__row dd {
  font-weight: 700;
  color: var(--ps-navy);
}

.card--credit__note {
  font-size: clamp(13px, 2.3vw, 18px);
  line-height: 1.45;
}

.t-pink-inline {
  color: var(--ps-pink) !important;
  font-weight: 900;
}

.callout {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  border-radius: var(--ps-radius);
  margin-bottom: 16px;
}

.callout--warn {
  background: var(--ps-pink-tint);
  border: 2px solid var(--ps-pink);
  padding: 18px 24px;
}

.callout__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.callout__icon--warn {
  width: 52px;
  height: 52px;
  background: var(--ps-pink);
  color: var(--ps-white);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}

.callout__icon--heart {
  width: 52px;
  height: 52px;
  border: 3px solid var(--ps-pink);
  color: var(--ps-pink);
}

.callout__text {
  font-weight: 700;
  font-size: clamp(14px, 2.3vw, 19px);
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--ps-navy);
}

.closing {
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  padding: 0 8px;
  margin-top: 4px;
}

.closing__left {
  flex: 1 1 62%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.thanks {
  flex: 0 1 38%;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(24px, 4.4vw, 36px);
  color: var(--ps-pink);
  line-height: 1.1;
  text-align: center;
}

@media (max-width: 720px) {
  .notice {
    padding: 72px 22px 82px;
  }

  .deco {
    width: 48%;
  }

  .features {
    flex-direction: column;
    gap: 22px;
    padding: 20px 18px;
  }

  .feature {
    flex-direction: row;
    text-align: left;
    gap: 16px;
    padding: 0;
  }

  .feature+.feature {
    border-left: none;
    border-top: 2px solid var(--ps-pink);
    padding-top: 22px;
  }

  .closing {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .thanks {
    text-align: center;
  }
}

@media (max-width: 860px) {
  .bank {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  .bank__logo {
    padding-right: 0;
    border-right: none;
    padding-bottom: 12px;
    border-bottom: 2px solid #c6cbdd;
  }

  .bank__data {
    align-items: flex-start;
    margin: 0 auto;
  }

  .bank__row dt {
    min-width: 92px;
  }
}