.service-note {
  width: min(100% - 32px, 580px);
  max-height: min(80vh, 690px);
  max-height: min(80dvh, 690px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 66px #08182045;
  overscroll-behavior: contain;
}
.service-note::backdrop { background: #101a235c; }
.service-note-inner { padding: clamp(20px, 4vw, 34px); border-top: 4px solid var(--accent); }
.service-note header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.service-note .eyebrow { margin-bottom: 8px; }
.service-note h2 { font-size: clamp(22px, 4vw, 32px); }
.service-note header button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--pale);
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
}
.service-note-body { color: var(--muted); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.service-note-body .service-terms-body, .service-note-body .pricing-conditions-body { padding: 0; }
.service-note-body h3 { color: var(--ink); font-size: 17px; margin-block: 18px 5px; }
.service-note-body a { color: var(--accent); }
.service-note-body .service-case-link { display: inline-block; margin-top: 16px; }
@media (max-width: 600px) {
  .service-note { margin: auto auto 12px; max-height: min(82dvh, 690px); }
}