/* Hallmark · genre: playful-restraint · macrostructure: Narrative Workflow · tone: utilitarian · anchor hue: coral
 * theme: CookClip paper · nav: N5 floating pill · footer: Ft1 mast-headed · enrichment: none
 * audience: CookClip users and store reviewers · use: verified in-app account-deletion guide
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · mobile: pass (34, 49, 50–57) · icons: pass (30)
 */
@import url("./delete-account-tokens.css?v=20260727-delete-account");

html,
body {
  overflow-x: clip;
}

.delete-hero {
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(6rem, 12vw, 9.5rem);
}

.delete-hero .page,
.delete-content {
  max-width: var(--delete-guide-measure);
}

.delete-hero h1 {
  max-width: 12ch;
}

.delete-hero .direct-answer {
  max-width: var(--delete-copy-measure);
  margin-top: var(--space-lg);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

.deletion-warning {
  border-top: var(--delete-rule-danger);
  background: var(--color-danger-soft);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.deletion-warning h2 {
  color: var(--color-danger);
}

.deletion-warning ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-xl);
  margin: var(--space-lg) 0 0;
  padding-left: 1.25rem;
}

.platform-guide {
  padding-block: var(--space-section);
}

.platform-guide + .platform-guide {
  border-top: var(--delete-rule-strong);
}

.platform-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--delete-copy-measure);
  margin-bottom: var(--space-2xl);
}

.platform-heading p {
  margin: 0;
}

.platform-heading h2 {
  margin: 0;
  color: var(--color-forest);
  font-size: var(--text-section);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.workflow {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: deletion-step;
}

.workflow li {
  display: grid;
  grid-template-columns: var(--delete-step-number-size) minmax(0, 1fr);
  gap: var(--space-lg);
  border-top: var(--delete-rule-strong);
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  counter-increment: deletion-step;
}

.workflow li::before {
  content: counter(deletion-step, decimal-leading-zero);
  color: var(--color-step-number);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.workflow h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.2;
}

.workflow p {
  max-width: var(--delete-copy-measure);
  margin: var(--space-sm) 0 0;
  color: var(--color-ink-soft);
}

.after-deletion {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: start;
}

.after-deletion > div {
  min-width: 0;
}

.after-deletion h2,
.support-panel h2 {
  margin-top: 0;
}

.status-list {
  margin: var(--space-lg) 0 0;
  padding-left: 1.25rem;
}

.status-list li + li {
  margin-top: var(--space-sm);
}

.support-panel {
  border-top: var(--delete-rule-strong);
  padding-top: var(--space-lg);
}

.support-panel .button {
  margin-top: var(--space-md);
  white-space: nowrap;
}

.button:focus-visible,
.nav-links a:focus-visible,
.footer-links a:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.button {
  transition:
    background-color var(--dur-normal) var(--ease-out),
    color var(--dur-normal) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px);
}

@media (max-width: 48rem) {
  .deletion-warning ul,
  .after-deletion {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-md);
  }
}

@media (max-width: 26rem) {
  .delete-hero {
    padding-block: 3.75rem 5rem;
  }

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

  .workflow li::before {
    margin-bottom: calc(var(--space-xs) * -1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition-duration: 0ms;
  }

  .button:hover,
  .button:active {
    transform: none;
  }
}