@layer unsubscribe {
  [hidden] {
    display: none !important;
  }

  .unsubscribe-page {
    min-inline-size: 20rem;
    min-block-size: 100svh;
    background: var(--of-color-page);
  }

  .unsubscribe-skip-link {
    position: fixed;
    z-index: 100;
    inset: var(--of-space-3) auto auto var(--of-space-3);
    border-radius: var(--of-radius-pill);
    padding: var(--of-space-3) var(--of-space-5);
    background: var(--of-color-focus);
    color: var(--of-color-text-on-bright);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-180%);
  }

  .unsubscribe-skip-link:focus {
    transform: translateY(0);
  }

  .unsubscribe-container {
    display: grid;
    min-block-size: min(42rem, calc(100svh - 16rem));
    place-items: center;
  }

  .unsubscribe-content {
    inline-size: min(100%, 34rem);
  }

  .unsubscribe-content > h1 {
    margin-block: var(--of-space-3) var(--of-space-4);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -0.035em;
    line-height: 1.15;
  }

  .unsubscribe-intro {
    color: var(--of-color-text-muted);
    line-height: 1.55;
  }

  .unsubscribe-card {
    position: relative;
    overflow: hidden;
    margin-block-start: var(--of-space-8);
    border: 1px solid var(--of-color-border-subtle);
    border-radius: var(--of-radius-xl);
    padding: clamp(var(--of-space-6), 6vw, var(--of-space-10));
    background: var(--of-color-surface-raised);
    box-shadow: none;
  }

  .unsubscribe-card::before {
    position: absolute;
    inset: 0 0 auto;
    block-size: 3px;
    background: var(--of-gradient-brand);
    content: "";
  }

  .unsubscribe-card h2 {
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    line-height: 1.18;
  }

  .unsubscribe-card__intro,
  .unsubscribe-success p {
    margin-block-start: var(--of-space-2);
    color: var(--of-color-text-muted);
    line-height: 1.5;
  }

  .unsubscribe-form {
    display: grid;
    gap: var(--of-space-5);
    margin-block-start: var(--of-space-8);
  }

  .unsubscribe-form .of-field__control {
    background-color: #ffffff;
  }

  .unsubscribe-form .of-button {
    margin-block-start: var(--of-space-1);
  }

  .unsubscribe-note,
  .unsubscribe-support {
    color: var(--of-color-text-muted);
    font-size: var(--of-text-small);
    line-height: 1.55;
  }

  .unsubscribe-note {
    margin-block-start: var(--of-space-5);
  }

  .unsubscribe-support {
    margin-block-start: var(--of-space-6);
    text-align: center;
  }

  .unsubscribe-support a {
    color: var(--of-color-focus);
  }

  .unsubscribe-alert {
    margin-block-start: var(--of-space-5);
    border: 1px solid var(--of-color-error);
    border-radius: var(--of-radius-md);
    padding: var(--of-space-3) var(--of-space-4);
    background: #fff3f0;
    color: var(--of-color-text);
    font-size: var(--of-text-small);
    line-height: 1.45;
  }

  .unsubscribe-success {
    display: grid;
    justify-items: start;
    gap: var(--of-space-4);
  }

  .unsubscribe-success__icon {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    border-radius: var(--of-radius-md);
    background: var(--of-sage);
    color: var(--of-color-focus);
    font-size: 1.7rem;
    font-weight: 800;
  }

  .unsubscribe-success .of-button {
    margin-block-start: var(--of-space-2);
  }
}