/**
 * Terms of Use — built to the supplied wireframes.
 *
 * Named `legalpage` rather than `terms` because the structure (hero
 * with orbit art, principle strip, accordion sections, side callouts,
 * closing banner) is the shape both legal pages share. A second legal
 * page can reuse this sheet instead of duplicating it.
 *
 * Conditional sheet, filemtime-versioned, outside the bundle.
 */

.legalpage {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 1200px;
}

.legalpage-admin-note {
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  padding: 0.85rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.legalpage-admin-note p {
  margin: 0.3rem 0 0;
}

/* ---- Hero ---------------------------------------------------------- */

.legalpage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(130deg, #F3F1FE, #EEF3FE 55%, #F7F1FB);
}

.legalpage-hero__heading {
  margin: 0 0 0.7rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: var(--color-ink-heading);
}

.legalpage-hero__lede {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.legalpage-hero__meta {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.legalpage-hero__art {
  position: relative;
  display: block;
  min-height: 200px;
}

.legalpage-hero__doc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5.6rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 12px 28px rgba(109, 94, 245, 0.25);
}

.legalpage-hero__orb {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.legalpage-hero__orb--1 { top: 18%; left: 24%; }
.legalpage-hero__orb--2 { top: 14%; left: 80%; }
.legalpage-hero__orb--3 { top: 52%; left: 14%; }
.legalpage-hero__orb--4 { top: 58%; left: 86%; }
.legalpage-hero__orb--5 { top: 84%; left: 34%; }

/* ---- Principles ----------------------------------------------------- */

.legalpage-principles {
  list-style: none;
  margin: 0;
  padding: 1.15rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.legalpage-principles__item {
  min-width: 0;
  text-align: center;
  padding: 0 0.4rem;
  border-left: 1px solid var(--color-border-soft);
}

.legalpage-principles__item:first-child {
  border-left: 0;
}

.legalpage-principles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
}

.legalpage-principles__title {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.legalpage-principles__text {
  margin: 0;
  font-size: 0.71rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Agreement strip ------------------------------------------------- */

.legalpage-agree {
  padding: 1.15rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legalpage-section__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  text-align: center;
  color: var(--color-ink-heading);
}

.legalpage-section__lede {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  text-align: center;
  color: var(--color-text-muted);
}

.legalpage-agree__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.legalpage-agree__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  padding: 0 0.4rem;
  border-left: 1px solid var(--color-border);
}

.legalpage-agree__item:first-child {
  border-left: 0;
}

.legalpage-agree__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.legalpage-agree__text {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

/* ---- Sections + asides ----------------------------------------------- */

.legalpage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 1.25rem;
  align-items: start;
}

.legalpage-accordion {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.legalpage-accordion__item + .legalpage-accordion__item {
  border-top: 1px solid var(--color-border-soft);
}

.legalpage-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-ink);
}

.legalpage-accordion__summary::-webkit-details-marker {
  display: none;
}

.legalpage-accordion__summary:hover {
  background: var(--color-surface);
}

.legalpage-accordion__chev {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transform: rotate(90deg);
  transition: transform var(--transition-fast);
}

.legalpage-accordion__item[open] .legalpage-accordion__chev {
  transform: rotate(270deg);
}

.legalpage-accordion__body {
  padding: 0 1rem 1rem;
}

.legalpage-accordion__body p {
  margin: 0 0 0.6rem;
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.legalpage-accordion__body p:last-child {
  margin-bottom: 0;
}

.legalpage-asides {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.legalpage-callout {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.legalpage-callout--trust {
  background: linear-gradient(150deg, #F1EFFE, #EDF3FE);
}

.legalpage-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.legalpage-callout__title {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--color-ink-heading);
}

.legalpage-callout__text {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- Editor content --------------------------------------------------- */

.legalpage-editor {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  font-size: 0.86rem;
  line-height: 1.7;
}

/* ---- Acceptance banner ------------------------------------------------ */

.legalpage-accept {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.legalpage-accept__icon {
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.legalpage-accept__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.legalpage-accept__copy strong {
  font-size: 0.86rem;
  color: var(--color-primary);
}

.legalpage-accept__copy span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.legalpage-accept__date {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---- Focus ------------------------------------------------------------ */

.legalpage a:focus-visible,
.legalpage summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .legalpage-accordion__chev {
    transition: none;
  }
}

/* ---- ≤1199 ------------------------------------------------------------ */

@media (max-width: 1199px) {
  .legalpage-principles,
  .legalpage-agree__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }

  .legalpage-principles__item,
  .legalpage-agree__item {
    border-left: 0;
  }
}

/* ---- ≤1023: asides below --------------------------------------------- */

@media (max-width: 1023px) {
  .legalpage-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .legalpage-hero__art {
    min-height: 160px;
  }

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

  .legalpage-asides {
    flex-direction: row;
  }

  .legalpage-asides > * {
    flex: 1 1 0;
  }
}

/* ---- ≤767: single column --------------------------------------------- */

@media (max-width: 767px) {
  .legalpage {
    gap: 0.9rem;
  }

  .legalpage-hero {
    padding: 1.1rem;
  }

  .legalpage-hero__heading {
    font-size: 1.35rem;
  }

  .legalpage-hero__lede {
    font-size: 0.82rem;
    max-width: none;
  }

  /* Principles become rows with the icon beside the text, as drawn. */
  .legalpage-principles {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.85rem;
    gap: 0.85rem;
  }

  .legalpage-principles__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.7rem;
    text-align: left;
    padding: 0;
  }

  .legalpage-principles__icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  /* The agreement strip stays a compact row of five, as drawn. */
  .legalpage-agree__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .legalpage-agree__text {
    font-size: 0.6rem;
    line-height: 1.25;
  }

  .legalpage-agree__icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .legalpage-asides {
    flex-direction: column;
  }

  .legalpage-accept {
    flex-wrap: wrap;
  }

  .legalpage-accept__date {
    flex: 1 1 100%;
  }
}

/* ---- ≤389 ------------------------------------------------------------- */

@media (max-width: 389px) {
  .legalpage-agree__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .legalpage-agree__text {
    font-size: 0.66rem;
  }
}

/* =====================================================================
   AI Transparency — extends the shared legal-page shell.
   Loaded from the same sheet because the hero, accordion, callout and
   banner are identical; only the AI-specific blocks are added here.
   ===================================================================== */

.aipage-hero__art {
  min-height: 220px;
}

.aipage-hero__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 28%;
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-deep));
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 1.15rem;
  box-shadow: 0 12px 28px rgba(109, 94, 245, 0.35);
}

/* Status banner — the page's most important sentence. */
.aipage-status {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.aipage-status__icon {
  flex: 0 0 auto;
  color: #B45309;
  margin-top: 0.1rem;
}

.aipage-status strong {
  display: block;
}

/* ---- Principles ------------------------------------------------------ */

.aipage-principles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}

.aipage-principles__item {
  min-width: 0;
  text-align: center;
  padding: 1rem 0.6rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.aipage-principles__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary);
}

.aipage-principles__title {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.aipage-principles__text {
  margin: 0;
  font-size: 0.71rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

/* ---- Panels (does / not / data / providers / feedback) ---------------- */

.aipage-triad {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.aipage-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.aipage-panel {
  min-width: 0;
  padding: 1.15rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.aipage-panel--data,
.aipage-panel--feedback {
  background: var(--color-surface);
}

.aipage-panel__title {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  color: var(--color-ink-heading);
}

.aipage-panel__lede {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.aipage-panel__note {
  margin: 0.8rem 0 0;
  font-size: 0.74rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.aipage-panel__warn {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  font-size: 0.73rem;
  line-height: 1.5;
  color: #92400E;
}

.aipage-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.85rem;
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

.aipage-panel__link:hover,
.aipage-panel__link:focus-visible {
  text-decoration: underline;
}

/* ---- Lists ----------------------------------------------------------- */

.aipage-list,
.aipage-negatives,
.aipage-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.aipage-list__item,
.aipage-negatives__item,
.aipage-checks__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.aipage-list__icon {
  flex: 0 0 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
}

.aipage-panel--data .aipage-list__icon,
.aipage-panel--feedback .aipage-list__icon {
  background: var(--color-white);
}

.aipage-list__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.aipage-list__body strong {
  font-size: 0.79rem;
  color: var(--color-ink);
}

.aipage-negatives__icon {
  flex: 0 0 auto;
  color: var(--color-error, #DC2626);
  margin-top: 0.15rem;
}

.aipage-checks__icon {
  flex: 0 0 auto;
  color: var(--color-positive);
  margin-top: 0.15rem;
}

/* ---- Sources & oversight --------------------------------------------- */

.aipage-sources,
.aipage-oversight {
  padding: 1.15rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.aipage-sources__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.aipage-oversight__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
}

.aipage-sources__item,
.aipage-oversight__item {
  min-width: 0;
  text-align: center;
  padding: 0 0.5rem;
  border-left: 1px solid var(--color-border-soft);
}

.aipage-sources__item:first-child,
.aipage-oversight__item:first-child {
  border-left: 0;
}

.aipage-sources__icon,
.aipage-oversight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.4rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
}

.aipage-sources__title,
.aipage-oversight__title {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.aipage-sources__text,
.aipage-oversight__text {
  display: block;
  font-size: 0.71rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.aipage-sources__note {
  margin: 1rem 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---- FAQ -------------------------------------------------------------- */

.aipage-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.aipage-faq__item {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.aipage-accept {
  background: linear-gradient(120deg, #F1EFFE, #EDF3FE);
}

/* ---- ≤1199 ------------------------------------------------------------ */

@media (max-width: 1199px) {
  .aipage-principles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .aipage-panel--data {
    grid-column: 1 / -1;
  }

  .aipage-oversight__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }

  .aipage-sources__item,
  .aipage-oversight__item {
    border-left: 0;
  }
}

/* ---- ≤1023 ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .aipage-hero__art {
    min-height: 170px;
  }

  .aipage-sources__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

/* ---- ≤767: the mobile wireframe --------------------------------------- */

@media (max-width: 767px) {
  /* Principles become a compact 3-across icon grid, as drawn. */
  .aipage-principles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .aipage-principles__item {
    padding: 0.75rem 0.35rem;
  }

  .aipage-principles__title {
    font-size: 0.7rem;
  }

  /* The descriptions are a desktop element — at three across on a
     phone they would be unreadable, and the accordions below carry
     the same detail. */
  .aipage-principles__text {
    display: none;
  }

  .aipage-triad,
  .aipage-duo {
    grid-template-columns: minmax(0, 1fr);
  }

  .aipage-panel--data {
    grid-column: auto;
  }

  .aipage-sources__grid,
  .aipage-oversight__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }

  .aipage-sources__item,
  .aipage-oversight__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.7rem;
    text-align: left;
    padding: 0;
  }

  .aipage-sources__icon,
  .aipage-oversight__icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .aipage-status {
    font-size: 0.78rem;
  }
}

/* =====================================================================
   Content & Source Policy — extends the shared shell and reuses the
   AI page's principle grid, panels and source-tile blocks.
   ===================================================================== */

.csppage-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.csppage-publish {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

/* ---- User responsibilities -------------------------------------------- */

.csppage-resp {
  padding: 1.15rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.csppage-resp__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.csppage-resp__item {
  min-width: 0;
  text-align: center;
  padding: 0 0.5rem;
  border-left: 1px solid var(--color-border);
}

.csppage-resp__item:first-child {
  border-left: 0;
}

.csppage-resp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.csppage-resp__title {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
  color: var(--color-ink);
  overflow-wrap: break-word;
}

.csppage-resp__text {
  display: block;
  font-size: 0.71rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.csppage-resp__note {
  margin: 1rem 0 0;
  font-size: 0.76rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* ---- Reporting banner -------------------------------------------------- */

.csppage-report {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.csppage-report__icon {
  flex: 0 0 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.csppage-report__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.csppage-report__title {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  color: var(--color-ink-heading);
}

.csppage-report__copy p {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- ≤1199 ------------------------------------------------------------- */

@media (max-width: 1199px) {
  .csppage-resp__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.9rem;
  }

  .csppage-resp__item {
    border-left: 0;
  }
}

/* ---- ≤1023 ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .csppage-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≤767 -------------------------------------------------------------- */

@media (max-width: 767px) {
  .csppage-publish {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .csppage-resp__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.7rem;
    text-align: left;
    padding: 0;
  }

  .csppage-resp__icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .csppage-report {
    flex-direction: column;
    align-items: flex-start;
  }

  .csppage-report .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   Accessibility — extends the shared shell and reuses the AI page's
   principle grid, tile grid and panels.
   ===================================================================== */

.a11ypage-hero__art {
  min-height: 220px;
}

.a11ypage-hero__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-deep));
  color: var(--color-white);
  box-shadow: 0 12px 28px rgba(109, 94, 245, 0.35);
}

/* Four commitment cards rather than the AI page's six. */
.a11ypage-commit__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.a11ypage-standards__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* ---- Features -------------------------------------------------------- */

.a11ypage-features {
  padding: 1.15rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.a11ypage-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 1.25rem;
}

/* ---- Feedback --------------------------------------------------------- */

.a11ypage-feedback {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.a11ypage-feedback__icon {
  flex: 0 0 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.a11ypage-feedback__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.a11ypage-feedback__title {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  color: var(--color-primary);
}

.a11ypage-feedback__copy p {
  margin: 0 0 0.35rem;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.a11ypage-feedback__note {
  margin: 0;
}

.a11ypage-feedback__note strong {
  color: var(--color-ink);
}

/* ---- Compatibility + cards -------------------------------------------- */

/* stretch, not start: the two stacked cards on the right are taller
   than the compatibility panel, and align-items: start left the panel
   at its content height with dead space beneath it. Stretching makes
   both columns the same height and the row read as one band. */
.a11ypage-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

/* The panel now fills its column, so its own content distributes into
   the height rather than clustering at the top: the chip rows sit
   under the intro and the testing note settles at the bottom. */
.a11ypage-duo > .aipage-panel {
  display: flex;
  flex-direction: column;
}

.a11ypage-duo > .aipage-panel .aipage-panel__note {
  margin-top: auto;
  padding-top: 0.85rem;
}

/* Browser and device chips read as one set, so the first row loses its
   bottom margin and the pair share a single gap. */
.a11ypage-compat + .a11ypage-compat {
  margin-top: 0;
}

.a11ypage-compat {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.a11ypage-compat__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  color: var(--color-ink);
}

.a11ypage-compat__icon {
  color: var(--color-primary);
}

.a11ypage-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.a11ypage-card {
  padding: 1.15rem;
  border-radius: var(--radius-lg);
}

.a11ypage-card--third {
  background: var(--color-positive-soft);
}

.a11ypage-card--ongoing {
  background: var(--color-warning-soft);
}

.a11ypage-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.a11ypage-card--third .a11ypage-card__icon { color: var(--color-positive); }
.a11ypage-card--ongoing .a11ypage-card__icon { color: #B45309; }

.a11ypage-card__title {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
}

.a11ypage-card--third .a11ypage-card__title { color: #15803D; }
.a11ypage-card--ongoing .a11ypage-card__title { color: #B45309; }

.a11ypage-card p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- ≤1199 ------------------------------------------------------------ */

@media (max-width: 1199px) {
  .a11ypage-commit__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .a11ypage-standards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .a11ypage-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- ≤1023 ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .a11ypage-hero__art {
    min-height: 170px;
  }

  /* One column here, so the stretch that balanced the two-column row
     no longer applies. */
  .a11ypage-duo {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .a11ypage-stack {
    flex-direction: row;
  }

  .a11ypage-stack > * {
    flex: 1 1 0;
  }
}

/* ---- ≤767 ------------------------------------------------------------- */

@media (max-width: 767px) {
  .a11ypage-commit__grid,
  .a11ypage-standards__grid,
  .a11ypage-features__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Standards keep their descriptions on mobile — unlike the AI
     principles, each line here states a scope limit, so hiding it
     would leave a bare badge that reads as a certification. */
  .a11ypage-standards__grid .aipage-oversight__text {
    display: block;
  }

  .a11ypage-feedback {
    flex-direction: column;
    align-items: flex-start;
  }

  .a11ypage-feedback .btn {
    width: 100%;
    justify-content: center;
  }

  .a11ypage-stack {
    flex-direction: column;
  }
}

/* =====================================================================
   Shared accent palette for the legal/policy pages.

   The wireframes give every tile in a row its own colour rather than a
   single indigo. Rather than hand-colouring five templates, each grid
   item takes a --accent / --accent-soft pair from its position, and
   the icon and title read those. One list to change, and any new tile
   inherits the rhythm automatically.

   Colours are the theme's own where one exists, and WCAG-checked
   darker variants where a tint needed a readable foreground.
   ===================================================================== */

.legalpage,
.privacy {
  --a1: #6D5EF5; --a1s: #EDEBFE;  /* indigo — primary */
  --a2: #2563EB; --a2s: #DBEAFE;  /* blue */
  --a3: #0F766E; --a3s: #CCFBF1;  /* teal — darkened to clear 4.5:1 */
  --a4: #DB2777; --a4s: #FCE7F3;  /* pink */
  --a5: #15803D; --a5s: #DCFCE7;  /* green — darkened to clear 4.5:1 */
  --a6: #B45309; --a6s: #FEF3C7;  /* amber */
  --a7: #7C3AED; --a7s: #F3E8FF;  /* violet */
  --a8: #DC2626; --a8s: #FEE2E2;  /* red */
}

/* Position → accent. Seven steps, then it repeats; no grid on these
   pages runs longer than nine. */
.legalpage-principles__item:nth-child(7n+1),
.legalpage-agree__item:nth-child(7n+1),
.aipage-principles__item:nth-child(7n+1),
.aipage-oversight__item:nth-child(7n+1),
.aipage-sources__item:nth-child(7n+1),
.csppage-resp__item:nth-child(7n+1),
.privacy-principles__item:nth-child(7n+1) { --accent: var(--a1); --accent-soft: var(--a1s); }

.legalpage-principles__item:nth-child(7n+2),
.legalpage-agree__item:nth-child(7n+2),
.aipage-principles__item:nth-child(7n+2),
.aipage-oversight__item:nth-child(7n+2),
.aipage-sources__item:nth-child(7n+2),
.csppage-resp__item:nth-child(7n+2),
.privacy-principles__item:nth-child(7n+2) { --accent: var(--a2); --accent-soft: var(--a2s); }

.legalpage-principles__item:nth-child(7n+3),
.legalpage-agree__item:nth-child(7n+3),
.aipage-principles__item:nth-child(7n+3),
.aipage-oversight__item:nth-child(7n+3),
.aipage-sources__item:nth-child(7n+3),
.csppage-resp__item:nth-child(7n+3),
.privacy-principles__item:nth-child(7n+3) { --accent: var(--a3); --accent-soft: var(--a3s); }

.legalpage-principles__item:nth-child(7n+4),
.legalpage-agree__item:nth-child(7n+4),
.aipage-principles__item:nth-child(7n+4),
.aipage-oversight__item:nth-child(7n+4),
.aipage-sources__item:nth-child(7n+4),
.csppage-resp__item:nth-child(7n+4),
.privacy-principles__item:nth-child(7n+4) { --accent: var(--a4); --accent-soft: var(--a4s); }

.legalpage-principles__item:nth-child(7n+5),
.legalpage-agree__item:nth-child(7n+5),
.aipage-principles__item:nth-child(7n+5),
.aipage-oversight__item:nth-child(7n+5),
.aipage-sources__item:nth-child(7n+5),
.csppage-resp__item:nth-child(7n+5),
.privacy-principles__item:nth-child(7n+5) { --accent: var(--a5); --accent-soft: var(--a5s); }

.legalpage-principles__item:nth-child(7n+6),
.legalpage-agree__item:nth-child(7n+6),
.aipage-principles__item:nth-child(7n+6),
.aipage-oversight__item:nth-child(7n+6),
.aipage-sources__item:nth-child(7n+6),
.privacy-principles__item:nth-child(7n+6) { --accent: var(--a8); --accent-soft: var(--a8s); }

.legalpage-principles__item:nth-child(7n+7),
.aipage-principles__item:nth-child(7n+7),
.aipage-oversight__item:nth-child(7n+7),
.privacy-principles__item:nth-child(7n+7) { --accent: var(--a7); --accent-soft: var(--a7s); }

/* Icons and titles read the pair. Falls back to the primary indigo, so
   an item outside a coloured grid still renders correctly. */
.legalpage-principles__icon,
.legalpage-agree__icon,
.aipage-principles__icon,
.aipage-oversight__icon,
.aipage-sources__icon,
.csppage-resp__icon,
.privacy-principles__icon {
  background: var(--accent-soft, var(--color-surface));
  color: var(--accent, var(--color-primary));
}

.legalpage-principles__title,
.aipage-principles__title,
.aipage-oversight__title,
.aipage-sources__title,
.csppage-resp__title,
.privacy-principles__title {
  color: var(--accent, var(--color-ink));
}

/* The "What AI is not" panel keeps its red, and the checks their
   green — those two carry meaning, so they are not part of the
   rotation. */

/* ---- Card borders and open-state accents ------------------------------ */

/* A hint of the item's own accent on the border, so a row reads as a
   set of coloured tiles rather than identical grey boxes. */
.aipage-principles__item,
.privacy-principles__item {
  border-color: var(--accent-soft, var(--color-border-soft));
}

/* An expanded accordion section is identifiable without reading it. */
.legalpage-accordion__item[open] > .legalpage-accordion__summary,
.aipage-faq__item[open] > .legalpage-accordion__summary {
  box-shadow: inset 3px 0 0 var(--color-primary);
  background: var(--color-surface);
}

/* ---- Tinted panels, as drawn ------------------------------------------ */

.legalpage-agree {
  background: linear-gradient(120deg, #F4F2FE, #EFF4FE);
}

.csppage-resp {
  background: linear-gradient(120deg, #F4F2FE, #EFF4FE);
}

.a11ypage-feedback {
  background: linear-gradient(120deg, #F1EFFE, #EDF3FE);
}

.csppage-report {
  background: linear-gradient(120deg, #F1EFFE, #EDF3FE);
  border-color: transparent;
}

.a11ypage-feedback__icon,
.csppage-report__icon,
.legalpage-agree__icon,
.csppage-resp__icon {
  box-shadow: var(--shadow-sm);
}

/* The trust callout on Terms already had a gradient; the contact one
   beside it now gets a soft tint so the pair reads as a set. */
.legalpage-callout {
  background: linear-gradient(150deg, #F6F5FF, #F2F7FF);
}

/* ---- Panel headings pick up the accent -------------------------------- */

.aipage-panel--not .aipage-panel__title { color: #B91C1C; }
.aipage-panel--data .aipage-panel__title { color: var(--color-primary-deep); }
.aipage-panel--feedback .aipage-panel__title { color: var(--color-primary-deep); }

/* Feature list icons on the Accessibility page cycle the same palette,
   so nine identical indigo tiles become a readable set. */
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+1) .aipage-list__icon { background: var(--a1s); color: var(--a1); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+2) .aipage-list__icon { background: var(--a2s); color: var(--a2); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+3) .aipage-list__icon { background: var(--a3s); color: var(--a3); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+4) .aipage-list__icon { background: var(--a4s); color: var(--a4); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+5) .aipage-list__icon { background: var(--a5s); color: var(--a5); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+6) .aipage-list__icon { background: var(--a6s); color: var(--a6); }
.a11ypage-features__grid > .aipage-list__item:nth-child(7n+7) .aipage-list__icon { background: var(--a7s); color: var(--a7); }

/* Same for the "Content We Publish" list. */
.csppage-publish > .aipage-list__item:nth-child(6n+1) .aipage-list__icon { background: var(--a1s); color: var(--a1); }
.csppage-publish > .aipage-list__item:nth-child(6n+2) .aipage-list__icon { background: var(--a2s); color: var(--a2); }
.csppage-publish > .aipage-list__item:nth-child(6n+3) .aipage-list__icon { background: var(--a3s); color: var(--a3); }
.csppage-publish > .aipage-list__item:nth-child(6n+4) .aipage-list__icon { background: var(--a4s); color: var(--a4); }
.csppage-publish > .aipage-list__item:nth-child(6n+5) .aipage-list__icon { background: var(--a5s); color: var(--a5); }
.csppage-publish > .aipage-list__item:nth-child(6n+6) .aipage-list__icon { background: var(--a6s); color: var(--a6); }

/* ---- Known Limitations (AI Transparency) ------------------------------ */
/* Amber rather than the page's indigo: this section is a caveat, and it
   should read as one at a glance rather than blending into the
   capability sections around it. */

.aipage-limits {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  background: var(--color-warning-soft);
}

.aipage-limits__intro {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.aipage-limits__icon {
  flex: 0 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: #B45309;
}

.aipage-limits__title {
  margin: 0 0 0.25rem;
  font-size: 0.98rem;
  color: #92400E;
}

.aipage-limits__lede {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #92400E;
  max-width: 78ch;
}

.aipage-limits__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.aipage-limits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #92400E;
  overflow-wrap: break-word;
}

.aipage-limits__bullet {
  flex: 0 0 auto;
  color: #B45309;
  margin-top: 0.1rem;
}

@media (max-width: 1023px) {
  .aipage-limits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .aipage-limits__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Unfinished-document notice --------------------------------------- */

.legalpage-draft {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: 0.82rem;
  line-height: 1.55;
  color: #92400E;
}

.legalpage-draft__icon {
  flex: 0 0 auto;
  color: #B45309;
  margin-top: 0.1rem;
}

.legalpage-draft strong {
  display: block;
}

/* ---- Related policy links --------------------------------------------- */

.legalpage-related {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.legalpage-related a {
  font-size: 0.78rem;
  color: var(--color-primary);
  text-decoration: none;
}

.legalpage-related a:hover,
.legalpage-related a:focus-visible {
  text-decoration: underline;
}

/* =====================================================================
   Cookie Settings — a control surface, so the switches must read as
   controls and their state must be obvious without relying on colour.
   ===================================================================== */

.cookiepage-top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cookiepage-title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  color: var(--color-ink-heading);
}

.cookiepage-intro p {
  margin: 0 0 0.6rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.cookiepage-intro__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

.cookiepage-intro__link:hover,
.cookiepage-intro__link:focus-visible {
  text-decoration: underline;
}

.cookiepage-updated {
  margin-top: 0.6rem;
  font-size: 0.76rem;
}

/* ---- Summary card ------------------------------------------------------ */

.cookiepage-summary {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}

.cookiepage-summary__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: var(--color-ink-heading);
}

.cookiepage-summary__title span {
  color: var(--color-primary);
  display: inline-flex;
}

.cookiepage-summary__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cookiepage-summary__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--color-ink);
}

.cookiepage-state {
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
}

.cookiepage-state--always { color: var(--color-text-muted); }
.cookiepage-state--on     { color: #15803D; }
.cookiepage-state--off    { color: #B91C1C; }

.cookiepage-summary__save {
  width: 100%;
  justify-content: center;
}

/* ---- Saved confirmation ------------------------------------------------ */

.cookiepage-saved {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-positive-soft);
  color: #15803D;
  font-size: 0.83rem;
}

.cookiepage-saved span {
  display: inline-flex;
}

/* ---- Category rows ----------------------------------------------------- */

.cookiepage-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookiepage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cookiepage-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
}

.cookiepage-item + .cookiepage-item {
  border-top: 1px solid var(--color-border-soft);
}

.cookiepage-item__icon {
  flex: 0 0 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-primary);
}

.cookiepage-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cookiepage-item__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  color: var(--color-ink-heading);
}

.cookiepage-badge {
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 0.68rem;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.cookiepage-item__blurb {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 72ch;
}

.cookiepage-details {
  margin-top: 0.5rem;
}

.cookiepage-details > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.cookiepage-details ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.cookiepage-details li + li {
  margin-top: 0.3rem;
}

/* ---- The switch --------------------------------------------------------- */
/* A real checkbox, visually hidden, with the track as its label. State is
   carried by position AND colour, never colour alone. */

.cookiepage-item__control {
  flex: 0 0 auto;
  padding-top: 0.2rem;
}

.cookiepage-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.cookiepage-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cookiepage-switch__track {
  display: inline-flex;
  align-items: center;
  width: 2.6rem;
  height: 1.5rem;
  padding: 0.15rem;
  border-radius: var(--radius-full);
  background: #CBD5E1;
  transition: background-color var(--transition-fast);
}

.cookiepage-switch__knob {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.cookiepage-switch input:checked + .cookiepage-switch__track {
  background: var(--color-primary);
}

.cookiepage-switch input:checked + .cookiepage-switch__track .cookiepage-switch__knob {
  transform: translateX(1.1rem);
}

/* Focus must be visible on the track, since the input itself is hidden. */
.cookiepage-switch input:focus-visible + .cookiepage-switch__track {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cookiepage-switch--locked {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 2.6rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  background: var(--color-border);
  color: var(--color-text-muted);
}

/* ---- Not-used note ------------------------------------------------------ */

.cookiepage-absent {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.cookiepage-absent__title {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  color: var(--color-ink-heading);
}

.cookiepage-absent ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cookiepage-absent li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cookiepage-absent li > span:first-child {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* ---- About + actions ---------------------------------------------------- */

.cookiepage-about {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.cookiepage-about__icon {
  flex: 0 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-primary);
}

.cookiepage-about__title {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  color: var(--color-ink-heading);
}

.cookiepage-about p {
  margin: 0 0 0.4rem;
  font-size: 0.79rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.cookiepage-about p:last-child {
  margin-bottom: 0;
}

.cookiepage-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.cookiepage-actions__reset {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.cookiepage-actions__reset > span:first-child {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-primary);
}

.cookiepage-actions__reset div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cookiepage-actions__reset strong {
  font-size: 0.84rem;
  color: var(--color-ink);
}

.cookiepage-actions__reset span {
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.cookiepage-actions__main {
  display: flex;
  gap: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .cookiepage-switch__track,
  .cookiepage-switch__knob {
    transition: none;
  }
}

/* ---- ≤1023 --------------------------------------------------------------- */

@media (max-width: 1023px) {
  .cookiepage-top {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- ≤767: the mobile wireframe ------------------------------------------ */

@media (max-width: 767px) {
  .cookiepage-title {
    font-size: 1.35rem;
  }

  /* Compact rows: icon, title and switch on one line, with the
     description inside the details disclosure. */
  .cookiepage-item {
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    gap: 0.6rem;
  }

  .cookiepage-item__icon {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
  }

  .cookiepage-item__title {
    margin-bottom: 0;
    font-size: 0.86rem;
  }

  .cookiepage-item__blurb {
    flex: 1 1 100%;
    font-size: 0.76rem;
  }

  .cookiepage-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookiepage-actions__reset {
    flex-wrap: wrap;
  }

  .cookiepage-actions__main {
    flex-direction: column-reverse;
  }

  .cookiepage-actions__main .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- "No choice made yet" note on the settings page -------------------- */

.cookiepage-pending {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  color: #92400E;
}

.cookiepage-pending span {
  flex: 0 0 auto;
  display: inline-flex;
  color: #B45309;
}

/* ---- Category detail (purpose / technologies / retention) -------------- */

.cookiepage-detail {
  margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  font-size: 0.76rem;
  line-height: 1.55;
}

.cookiepage-detail dt {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.cookiepage-detail dd {
  margin: 0;
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.cookiepage-detail ul {
  margin: 0;
  padding-left: 1rem;
}

.cookiepage-detail li + li {
  margin-top: 0.2rem;
}

@media (max-width: 767px) {
  .cookiepage-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .cookiepage-detail dd {
    margin-bottom: 0.5rem;
  }
}