@layer components {
  .policy-page main{
    min-height:calc(100svh - var(--nav-height, 72px));
    padding-top:var(--nav-height, 72px);
    display:grid;
    align-content:center;
    justify-items:center;
    margin:0;
    padding-inline:24px;
  }

  .policy-card{
    width:min(840px, 100%);
    box-sizing:border-box;
    background:var(--surface);
    border:2px solid var(--primary);
    border-radius:14px;
    box-shadow:0 10px 24px rgba(44,169,188,.18);
    padding:clamp(18px, 4vw, 32px);
    margin:0 auto 1.5rem;
  }

  .policy-card h1{
    margin-top:0;
    text-align:center;
  }

  .policy-lead{
    text-align:center;
    color:var(--text-muted);
    max-width:60ch;
    margin:8px auto 16px;
  }

  .policy-section{
    margin-top:20px;
  }

  .policy-section h2{
    margin-top:0.2em;
  }

  .policy-list{
    padding-left:20px;
  }

  .policy-meta{
    margin-top:16px;
    font-size:.95rem;
    color:var(--text-muted);
  }

  #privacy-preferences-form{
    margin-top:1.25rem;
  }

  .pref-grid{
    display:grid;
    gap:12px;
  }

  .pref-option{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:12px;
    padding:8px;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:12px;
    background:rgba(255,255,255,0.02);
  }

  .pref-toggle{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    width:100%;
    border:2px solid var(--primary);
    border-radius:10px;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
    transition:background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .pref-toggle[aria-pressed="true"]{
    background:var(--primary);
    color:var(--on-primary);
  }

  .pref-toggle[disabled]{
    cursor:not-allowed;
    opacity:0.85;
  }

  .pref-label{
    font-weight:600;
    text-align:left;
  }

  .pref-state{
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }

  .pref-toggle[aria-pressed="true"] .pref-state{
    color:inherit;
  }

  .pref-toggle:not([aria-pressed="true"]) .pref-state{
    color:var(--text-muted);
  }

  .pref-info{
    border:none;
    background:var(--surface-elevated, rgba(255,255,255,0.08));
    color:inherit;
    width:36px;
    height:36px;
    border-radius:50%;
    font-weight:700;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background-color 0.2s ease, color 0.2s ease;
  }

  .pref-info:hover,
  .pref-info:focus-visible{
    background:var(--primary);
    color:var(--on-primary);
  }

  .pref-description{
    margin:0;
    margin-top:8px;
    font-size:0.9rem;
    color:var(--text-muted);
    grid-column:1 / -1;
  }

  #save-privacy-preferences{
    margin-top:1rem;
    padding:0.75rem 1.25rem;
    border:none;
    border-radius:8px;
    background-color:var(--primary);
    color:var(--on-primary);
    cursor:pointer;
    font-weight:600;
    width:100%;
  }

  #save-privacy-preferences:hover{
    background-color:var(--primary-dark, #2ca9bc);
  }

  @media (min-width: 680px){
    .pref-option{
      grid-template-columns:minmax(0, 1fr) auto;
    }
    #save-privacy-preferences{
      width:auto;
    }
  }
}