.cookies-page {
  padding-block: var(--space-12) var(--space-24);
}

.cookies-page__container {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  column-gap: var(--space-8);
  align-items: start;
}

.cookies-page__aside,
.cookies-page__content,
.cookies-page__content > section,
.cookies-category-row > *,
.cookies-step > *,
.cookies-contact-card__row > * {
  min-width: 0;
}

.cookies-page__aside {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 17.5rem;
  justify-self: end;
  position: sticky;
  top: 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.cookies-page__content {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 45rem;
  justify-self: start;
}

.cookies-page__content > section + section {
  margin-top: var(--space-24);
}

.cookies-index {
  width: 100%;
  padding: var(--space-4);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--color-paper-000);
}

.cookies-index__title {
  margin: 0 0 var(--space-3);
  color: var(--color-navy-900);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cookies-index__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cookies-index__list li,
.cookies-index__list a {
  min-width: 0;
}

.cookies-index__list a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-index__list a[aria-current="true"] {
  color: var(--color-sky-700);
  font-weight: 700;
  text-decoration-thickness: 0.14em;
}

.cookies-scope-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  border-left: 3px solid var(--color-sky-500);
  background: rgb(59 159 216 / 8%);
}

.cookies-scope-note__label {
  color: var(--color-navy-900);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cookies-scope-note p {
  margin: 0;
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-breadcrumb > * {
  min-width: 0;
}

.cookies-opening__copy {
  max-width: 43rem;
}

.cookies-opening__copy .eyebrow,
.cookies-section .eyebrow {
  margin-bottom: var(--space-3);
}

.cookies-opening__lead {
  max-width: 42rem;
  color: var(--color-navy-700);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.cookies-opening__date {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 0;
  color: var(--color-navy-700);
  font-size: var(--text-sm);
}

.cookies-calendar {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--color-sky-500);
  border-radius: var(--radius-grid);
  background: linear-gradient(var(--color-sky-500), var(--color-sky-500)) 0 0 / 100% 0.3rem no-repeat;
}

.cookies-opening__scope {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 40rem;
  margin-top: var(--space-10);
  margin-bottom: 0;
}

.cookies-opening__scope::after {
  position: absolute;
  z-index: 0;
  top: var(--space-3);
  right: var(--space-3);
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(59 159 216 / 20%);
  border-radius: var(--radius-grid);
  background-image: linear-gradient(to right, rgb(59 159 216 / 18%) 1px, transparent 1px), linear-gradient(to bottom, rgb(59 159 216 / 18%) 1px, transparent 1px);
  background-size: 1rem 1rem;
  content: "";
  pointer-events: none;
}

.cookies-opening__scope > * {
  position: relative;
  z-index: 1;
  margin: 0;
}

.cookies-opening__scope h2 {
  font-size: var(--text-card-title);
}

.cookies-section__intro,
.cookies-categories__intro,
.cookies-consent__intro,
.cookies-third-party__copy,
.cookies-privacy__copy,
.cookies-updates__copy,
.cookies-contact__intro {
  max-width: 45rem;
}

.cookies-definition__card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 37.5rem;
  margin-top: var(--space-8);
  padding: var(--space-6);
}

.cookies-definition__markers {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  width: 2rem;
  min-width: 0;
  height: 4rem;
}

.cookies-definition__markers span:nth-child(1) { background: var(--color-mint-300); }
.cookies-definition__markers span:nth-child(2) { background: var(--color-sun-300); }
.cookies-definition__markers span:nth-child(3) { background: var(--color-coral-300); }

.cookies-definition__markers span {
  min-width: 0;
  border-radius: var(--radius-grid);
}

.cookies-definition__card h3,
.cookies-definition__card p {
  margin: 0;
}

.cookies-definition__card > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.cookies-definition__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 40rem;
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 3px solid var(--color-sky-500);
}

.cookies-definition__note h3,
.cookies-definition__note p {
  margin: 0;
}

.cookies-categories {
  width: min(100%, 62.5rem);
  max-width: none;
  margin-left: calc((45rem - min(100%, 62.5rem)) / 2);
}

.cookies-categories__intro {
  width: min(100%, 45rem);
  margin-left: max(0px, (min(100%, 62.5rem) - 45rem) / 2);
}

.cookies-category-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  margin-top: var(--space-8);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--color-paper-000);
  overflow: hidden;
}

.cookies-category-table__head,
.cookies-category-row {
  display: grid;
  grid-template-columns: minmax(11rem, 22fr) minmax(0, 52fr) minmax(10rem, 26fr);
}

.cookies-category-table__head > *,
.cookies-category-row > * {
  min-width: 0;
  padding: var(--space-4);
}

.cookies-category-table__head {
  background: var(--color-ivory-050);
  color: var(--color-navy-900);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
}

.cookies-category-row + .cookies-category-row,
.cookies-category-table__head + .cookies-category-row {
  border-top: var(--border-default);
}

.cookies-category-row > * + *,
.cookies-category-table__head > * + * {
  border-left: var(--border-default);
}

.cookies-category-row__category {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: var(--space-3);
  align-content: start;
}

.cookies-category-row__category h3,
.cookies-category-row p {
  margin: 0;
}

.cookies-category-row p {
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-category-swatch {
  width: 0.75rem;
  min-width: 0.75rem;
  height: 2rem;
  border-radius: var(--radius-grid);
}

.cookies-category-row--necessary .cookies-category-swatch { background: var(--color-mint-300); }
.cookies-category-row--preferences .cookies-category-swatch { background: var(--color-sky-500); }
.cookies-category-row--measurement .cookies-category-swatch { background: var(--color-sun-300); }
.cookies-category-row--third-party .cookies-category-swatch { background: var(--color-coral-300); }

.cookies-consent__principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-8);
}

.cookies-consent__principle > * {
  margin: 0;
}

.cookies-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  margin: var(--space-10) 0 0;
  padding: 0;
  list-style: none;
}

.cookies-step {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: var(--space-4);
  width: 100%;
}

.cookies-step__number {
  width: 4rem;
  min-width: 0;
  height: 4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-line-200);
  border-radius: var(--radius-grid);
  background: var(--color-paper-000);
  color: var(--color-navy-900);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
}

.cookies-step__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 41.25rem;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-line-200);
}

.cookies-step__body h3,
.cookies-step__body p {
  margin: 0;
}

.cookies-step__warning {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-coral-300);
  background: rgb(233 154 136 / 12%);
  color: var(--color-navy-700);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-external-block {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 40.625rem;
  margin-top: var(--space-8);
}

.cookies-external-block__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  min-width: 0;
  height: 2.75rem;
  border: var(--border-default);
  border-radius: var(--radius-grid);
  background: var(--color-paper-000);
  color: var(--color-sky-700);
  font-family: var(--font-heading);
  font-weight: 800;
}

.cookies-external-block > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.cookies-external-block h3,
.cookies-external-block p {
  margin: 0;
}

.cookies-external-block__caption {
  color: var(--color-navy-700);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cookies-play-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 42.5rem;
  margin-top: var(--space-8);
}

.cookies-play-panel > * {
  margin: 0;
}

.cookies-play-panel a {
  overflow-wrap: anywhere;
}

.cookies-third-party__conditional {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 40rem;
  margin-top: var(--space-8);
  padding: var(--space-4);
  border: 1px dashed var(--color-line-200);
}

.cookies-third-party__conditional h3,
.cookies-third-party__conditional p {
  margin: 0;
}

.cookies-privacy__copy {
  padding-left: var(--space-6);
  border-left: 4px solid var(--color-sky-500);
}

.cookies-privacy__copy p:last-child {
  max-width: 40rem;
  margin-bottom: 0;
}

.cookies-privacy__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 37.5rem;
  margin-top: var(--space-8);
  padding: var(--space-6);
}

.cookies-privacy__card h3,
.cookies-privacy__card p {
  margin: 0;
}

.cookies-privacy__card a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.cookies-privacy__closing {
  max-width: 33.75rem;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-default);
  color: var(--color-navy-700);
}

.cookies-updates__copy {
  max-width: 38.75rem;
}

.cookies-version-band {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  max-width: 45rem;
  margin-top: var(--space-8);
  padding: var(--space-4);
  background: var(--color-navy-900);
  color: var(--color-ivory-050);
}

.cookies-version-band__cell {
  width: 0.75rem;
  min-width: 0;
  min-height: 2.5rem;
  background: var(--color-sky-500);
}

.cookies-version-band > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
}

.cookies-version-band strong {
  font-family: var(--font-heading);
}

.cookies-version-band span:last-child {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cookies-contact__intro {
  max-width: 37.5rem;
}

.cookies-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 38.75rem;
  margin-top: var(--space-8);
  padding: var(--space-6);
}

.cookies-contact-card__row {
  display: grid;
  grid-template-columns: 6.875rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-3);
}

.cookies-contact-card__row + .cookies-contact-card__row {
  border-top: var(--border-default);
}

.cookies-contact-card__row > span {
  color: var(--color-navy-700);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 800;
}

.cookies-contact-card__row a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.cookies-contact-card__row p {
  margin: 0;
}

.cookies-contact__limit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 37.5rem;
  margin-top: var(--space-6);
}

.cookies-contact__limit > * {
  margin: 0;
}

.cookies-section[id] {
  scroll-margin-top: 8rem;
}

@media (max-width: 57.5rem) {
  .cookies-page {
    padding-block: var(--space-10) var(--space-20);
  }

  .cookies-page__container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
  }

  .cookies-page__aside,
  .cookies-page__content {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    justify-self: stretch;
  }

  .cookies-page__aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    order: 2;
  }

  .cookies-page__content {
    order: 1;
  }

  .cookies-index__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }

  .cookies-index__list li {
    flex: 0 0 auto;
  }

  .cookies-categories {
    width: 100%;
    margin-left: 0;
  }

  .cookies-categories__intro {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 51.25rem) {
  .cookies-category-table {
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .cookies-category-table__head {
    display: none;
  }

  .cookies-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-default);
    border-radius: var(--radius-card);
    background: var(--color-paper-000);
  }

  .cookies-category-row + .cookies-category-row,
  .cookies-category-table__head + .cookies-category-row {
    margin-top: var(--space-4);
    border-top: var(--border-default);
  }

  .cookies-category-row > * {
    padding: 0;
  }

  .cookies-category-row > * + * {
    border-left: 0;
  }

  .cookies-category-row > *:not(.cookies-category-row__category)::before {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-navy-700);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    content: attr(data-label);
  }
}

@media (max-width: 43.75rem) {
  .cookies-step {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .cookies-step__number {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-base);
  }

  .cookies-step__body {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 47.99rem) {
  .cookies-page__content > section + section {
    margin-top: var(--space-16);
  }

  .cookies-opening__copy h1 {
    font-size: 2rem;
    line-height: 1.1875;
  }

  .cookies-opening__scope,
  .cookies-definition__card,
  .cookies-privacy__card,
  .cookies-contact-card {
    padding: var(--space-4);
  }

  .cookies-opening__scope {
    margin-top: var(--space-8);
  }

  .cookies-definition__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-definition__markers {
    grid-template-columns: repeat(3, 1rem);
    grid-template-rows: 1rem;
    width: auto;
    height: 1rem;
  }

  .cookies-consent__principle,
  .cookies-external-block,
  .cookies-play-panel,
  .cookies-privacy__card,
  .cookies-contact-card {
    margin-top: var(--space-6);
  }

  .cookies-steps {
    gap: var(--space-6);
    margin-top: var(--space-8);
  }

  .cookies-external-block {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-contact-card__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .cookies-version-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-version-band__cell {
    width: 2.5rem;
    min-height: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookies-index__list {
    scroll-behavior: auto;
  }
}
