/* rule-content.css */
/* Rule Landing Page */

.rule-content__header {
  padding: var(--spacing-12) var(--spacing-10);
  background: var(--color-cream);
}

@media (max-width: 960px) {
  .rule-content__header {
    padding: var(--spacing-8) var(--spacing-4);
  }
}

.rule-content__header-inner {
  display: flex;
  max-width: var(--max-width-3xl);
  align-items: center;
  margin: 0 auto;
  gap: var(--spacing-4);
}

.rule-content__icon-circle {
  display: flex;
  width: var(--size-48);
  height: var(--size-48);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-white);
}

@media (max-width: 960px) {
  .rule-content__icon-circle {
    width: var(--size-40);
    height: var(--size-40);
  }
}

.rule-content__icon {
  width: 60%;
  height: 60%;
}

.rule-content__title {
  font-size: var(--size-30);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

@media (max-width: 960px) {
  .rule-content__title {
    font-size: var(--size-24);
  }
}

.rule-content__body {
  padding: var(--spacing-18) var(--spacing-10);
  background: var(--color-white);
}

@media (max-width: 960px) {
  .rule-content__body {
    padding: var(--spacing-14) var(--spacing-4);
  }
}

.rule-content__container {
  max-width: var(--max-width-3xl);
  margin: 0 auto;
}

.rule-content__section + .rule-content__section {
  margin-top: var(--spacing-14);
}

.rule-content__heading {
  margin-bottom: var(--spacing-4);
  font-size: var(--size-20);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

@media (max-width: 960px) {
  .rule-content__heading {
    font-size: var(--size-18);
  }
}

.rule-content__divider {
  border: 0;
  border-top: 1px solid var(--color-border-gray);
  margin: 0 0 var(--spacing-8);
}

.rule-content__actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-6);
}

@media (max-width: 960px) {
  .rule-content__actions--duo {
    flex-direction: column;
    align-items: center;
  }
}

.rule-content__link-btn {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 320px;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4) var(--spacing-6);
  border: 1px solid var(--color-border-neutral);
  border-radius: var(--radius-sm);
  color: var(--color-black);
  font-size: var(--size-16);
  font-weight: var(--font-weight-bold);
  gap: var(--spacing-2);
  line-height: var(--line-height-normal);
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

@media (max-width: 960px) {
  .rule-content__link-btn {
    max-width: 100%;
    font-size: var(--size-14);
  }
}

.rule-content__link-btn:hover {
  border-color: var(--color-black);
  background-color: var(--color-cream);
}

.rule-content__link-arrow {
  position: absolute;
  right: var(--spacing-4);
  width: var(--size-10);
  height: var(--size-16);
  flex-shrink: 0;
}

.consent-content {
  padding: var(--spacing-18) var(--spacing-10);
  background: var(--color-white);
}

@media (max-width: 960px) {
  .consent-content {
    padding: var(--spacing-14) var(--spacing-4);
  }
}

.consent-content__container {
  max-width: var(--max-width-3xl);
  margin: 0 auto;
}

.consent-content__headline {
  margin-bottom: var(--spacing-8);
  font-size: var(--size-24);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 960px) {
  .consent-content__headline {
    font-size: var(--size-20);
  }
}

.consent-content__body {
  margin: 0;
}

.consent-content__item {
  margin-top: var(--spacing-12);
  font-size: var(--size-16);
  -webkit-font-smoothing: antialiased;
  line-height: var(--line-height-relaxed);
}

@media (max-width: 960px) {
  .consent-content__item {
    margin-top: var(--spacing-8);
    font-size: var(--size-14);
  }
}

.consent-content__number {
  font-weight: var(--font-weight-normal);
}

.consent-content h2 {
  margin-top: var(--spacing-12);
  margin-bottom: var(--spacing-4);
  font-size: var(--size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-normal);
}

@media (max-width: 960px) {
  .consent-content h2 {
    font-size: var(--size-16);
  }
}

.consent-content p {
  margin-top: var(--spacing-3);
  line-height: var(--line-height-relaxed);
}

.consent-content .text-flex {
  display: flex;
}

.consent-content .left-indent {
  margin-left: var(--spacing-6);
}

@media (max-width: 960px) {
  .consent-content .left-indent {
    margin-left: var(--spacing-4);
  }
}

.consent-content .mt-0 {
  margin-top: 0;
}

.consent-content .mt-md {
  margin-top: var(--spacing-6);
}

.consent-content ul,
.consent-content ol {
  padding: 0;
}

.consent-content ul.disc,
.consent-content ol.disc {
  list-style: disc;
}

.consent-content ul li,
.consent-content ol li {
  margin-top: var(--spacing-3);
}

.consent-content ul li span:first-child,
.consent-content ol li span:first-child {
  margin-right: var(--spacing-1);
}

.consent-content ul {
  margin-left: var(--spacing-12);
}

@media (max-width: 960px) {
  .consent-content ul {
    margin-left: var(--spacing-6);
  }
}

.consent-content ol {
  margin-left: var(--spacing-7);
}

@media (max-width: 960px) {
  .consent-content ol {
    margin-left: var(--spacing-2);
  }
}

.consent-content__notes {
  margin-bottom: 0 !important;
  color: var(--color-text-gray);
  font-size: var(--size-12);
}

.consent-content__indent {
  padding-left: var(--spacing-8);
}

@media (max-width: 960px) {
  .consent-content__indent {
    padding-left: var(--spacing-4);
  }
}

.consent-content__url-prefix {
  margin-right: 2px;
}

.consent-content__link {
  color: var(--color-blue);
  text-decoration: underline;
  word-break: break-all;
}

.consent-content__revision {
  color: var(--color-text-gray);
  font-size: var(--size-14);
  line-height: var(--line-height-relaxed);
  text-align: left;
}

.consent-content__box {
  padding: var(--spacing-4);
  border-radius: var(--radius-sm);
  margin: var(--spacing-4) 0;
  margin-left: var(--spacing-4);
  background: var(--color-cream);
  font-size: var(--size-14);
  line-height: var(--line-height-relaxed);
}

.consent-content__box p {
  margin: 0;
}

.consent-content__box p + p {
  margin-top: var(--spacing-2);
}