/* /data-deletion and /data-deletion/status. Shares the Contact page's palette and
   IBM Plex type so the legal pages that Meta and Google reviewers open read as
   part of the same site. */
@font-face { font-family: 'DD Plex'; src: url('../fonts/ibmplexsans-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DD Plex'; src: url('../fonts/ibmplexsans-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DD Plex Arabic'; src: url('../fonts/ibmplexsansarabic-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DD Plex Arabic'; src: url('../fonts/ibmplexsansarabic-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

.dd-page {
  --dd-purple: #764ff6;
  --dd-purple-hover: #6440e8;
  --dd-purple-deep: #5130b4;
  --dd-link: #6134d5;
  --dd-lilac: #f0eaff;
  --dd-lilac-soft: #f6f3ff;
  --dd-ink: #15151a;
  --dd-body: #4a4652;
  --dd-muted: #686570;
  --dd-faint: #77717f;
  --dd-line: #dcd9e1;
  --dd-line-soft: #ece9f0;
  --dd-paper: #f9f9f7;
  --dd-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --dd-font: 'DD Plex', 'Inter', sans-serif;
  background: var(--dd-paper);
}
.dd-hero, .dd-section { font-family: var(--dd-font); color: var(--dd-ink); }
.dd-page [hidden] { display: none !important; }
.dd-wrap { width: min(1232px, calc(100% - 80px)); margin-inline: auto; }

/* Shared type and controls */
.dd-section h2 { margin: 0; font: 600 clamp(32px, 3.3vw, 46px)/1.08 var(--dd-font); letter-spacing: -.045em; color: var(--dd-ink); text-wrap: balance; }
.dd-option { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--dd-link); }
.dd-body { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--dd-body); max-width: 34em; }
.dd-body a, .dd-questions a, .dd-hero-note a, .dd-status-msg a, .dd-code-note a {
  color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.dd-body a, .dd-status-msg a, .dd-code-note a { color: var(--dd-link); font-weight: 600; }
.dd-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--dd-purple); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.4; letter-spacing: .01em; white-space: nowrap; }
.dd-badge-soft { background: #e9e0ff; color: var(--dd-purple-deep); }
.dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 13px 22px; border: 0; border-radius: 8px; background: var(--dd-purple); color: #fff; font: 600 15px/1.2 var(--dd-font); cursor: pointer; white-space: nowrap; transition: background .18s ease; }
.dd-btn:hover { background: var(--dd-purple-hover); }
.dd-btn-icon { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .18s ease; }
.dd-btn:hover .dd-btn-icon { transform: translateX(3px); }
.dd-btn-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 20px; border: 1px solid #cfc8dc; border-radius: 8px; background: #fff; color: var(--dd-ink); font: 600 15px/1.2 var(--dd-font); cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.dd-btn-quiet:hover { border-color: var(--dd-purple); color: var(--dd-purple-deep); }
.dd-btn-quiet.is-copied { border-color: #22a06b; color: #17784f; }
.dd-section a:focus-visible, .dd-section button:focus-visible { outline: 3px solid var(--dd-link); outline-offset: 4px; border-radius: 6px; }
.dd-hero a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 6px; }
.dd-hero .dd-routes a:focus-visible, .dd-hero .dd-lookup :focus-visible { outline-color: var(--dd-link); }

/* Hero */
.dd-hero { position: relative; overflow: clip; background: var(--dd-purple); color: #fff; padding: 72px 0 88px; }
.dd-hero::before { content: ''; position: absolute; inset: -40% -10% auto auto; width: 820px; height: 820px; border-radius: 50%; background: radial-gradient(circle, #9b7dff 0%, #9b7dff00 62%); opacity: .55; pointer-events: none; }
.dd-hero::after { content: ''; position: absolute; left: -180px; bottom: -420px; width: 760px; height: 760px; border-radius: 50%; border: 1px solid #ffffff1f; box-shadow: 0 0 0 90px #ffffff07, 0 0 0 180px #ffffff05; pointer-events: none; }
.dd-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 72px; align-items: center; }
.dd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 18px; font-size: 14px; color: #e9e1ff; }
.dd-lang { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid #ffffff4d; border-radius: 999px; color: #fff; font-size: 13px; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.dd-lang:hover { background: #ffffff1a; border-color: #ffffff8c; }
.dd-hero h1 { margin: 0; color: #fff; font: 600 clamp(58px, 6.6vw, 100px)/.98 var(--dd-font); letter-spacing: -.062em; }
.dd-lede { margin: 26px 0 0; max-width: 21em; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.32; letter-spacing: -.02em; color: #fff; }
.dd-hero-note { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: #efe9ff; }
.dd-hero-note a { color: #fff; font-weight: 600; text-decoration-color: #cbb9ff; }
.dd-hero-note a:hover { text-decoration-color: #fff; }
.dd-clock { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 0; max-width: 560px; border-top: 1px solid #ffffff40; }
.dd-clock > div { padding: 20px 0 0; padding-inline-end: 20px; }
.dd-clock > div + div { padding-inline-start: 20px; border-inline-start: 1px solid #ffffff2e; }
.dd-clock dt { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dd-clock dd { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #e6dcff; }

.dd-routes { background: #fff; color: var(--dd-ink); border-radius: 18px; padding: 26px 28px 0; box-shadow: 0 30px 70px #2a0c7a33; }
.dd-routes-title { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.dd-route { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 16px; align-items: center; padding: 20px 0; border-top: 1px solid var(--dd-line-soft); color: inherit; text-decoration: none; }
.dd-route-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dd-lilac); color: var(--dd-purple-deep); font-size: 16px; font-weight: 600; transition: background .18s ease, color .18s ease; }
.dd-route-body { min-width: 0; }
.dd-route-body strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; transition: color .18s ease; }
.dd-route-body > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--dd-muted); }
.dd-route-body > .dd-route-logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dd-route-logos img { width: 20px; height: 20px; object-fit: contain; }
.dd-route-arrow { width: 20px; height: 20px; color: var(--dd-faint); transition: transform .18s ease, color .18s ease; }
.dd-route:hover strong { color: var(--dd-purple-deep); }
.dd-route:hover .dd-route-num { background: var(--dd-purple); color: #fff; }
.dd-route:hover .dd-route-arrow { transform: translateX(4px); color: var(--dd-purple); }
.dd-route-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 -28px; padding: 17px 28px; border-radius: 0 0 18px 18px; background: var(--dd-lilac-soft); color: var(--dd-muted); font-size: 14px; text-decoration: none; }
.dd-route-status strong { color: var(--dd-link); font-weight: 600; }
.dd-route-status:hover strong { text-decoration: underline; text-underline-offset: 4px; }

/* Sections */
.dd-section { padding: 112px 0; background: #fff; scroll-margin-top: 72px; }
.dd-section-paper { background: var(--dd-paper); }
.dd-section-lilac { background: #f2edff; }
.dd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: start; }
.dd-split-center { align-items: center; }
.dd-split-copy { min-width: 0; }

/* Option 1 */
.dd-steps { list-style: none; margin: 36px 0 0; padding: 0; border-bottom: 1px solid var(--dd-line); }
.dd-steps li { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--dd-line); font-size: 18px; line-height: 1.45; color: var(--dd-ink); }
.dd-steps strong { font-weight: 600; }
.dd-step-n { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--dd-purple); color: var(--dd-purple-deep); font-size: 14px; font-weight: 600; }
.dd-outcome { display: flex; gap: 16px; margin-top: 28px; padding: 20px 22px; border: 1px solid #e4dff0; border-radius: 14px; background: #fff; }
.dd-outcome-icon { flex: 0 0 auto; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--dd-lilac); color: var(--dd-purple-deep); }
.dd-outcome p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dd-muted); }
.dd-outcome strong { display: block; margin-bottom: 3px; font-size: 16px; font-weight: 600; color: var(--dd-ink); }

.dd-mock { margin: 0; }
.dd-window { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e7e2f1, 0 40px 80px -30px #35107040; }
.dd-window-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: #f4f2f8; border-bottom: 1px solid var(--dd-line-soft); }
.dd-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcd7e6; }
.dd-window-body { position: relative; padding: 26px 28px 30px; }
.dd-window-crumb { margin: 0 0 18px; font-size: 13px; color: var(--dd-faint); }
.dd-window-crumb span { margin: 0 4px; }
.dd-window-crumb b { color: var(--dd-ink); font-weight: 600; }
.dd-conn { list-style: none; margin: 0; padding: 0; border: 1px solid var(--dd-line-soft); border-radius: 12px; overflow: hidden; }
.dd-conn li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 18px; }
.dd-conn li + li { border-top: 1px solid var(--dd-line-soft); }
.dd-conn img { width: 30px; height: 30px; object-fit: contain; }
.dd-conn img.is-padded { padding: 2px; }
.dd-conn-name { min-width: 0; font-size: 15px; font-weight: 600; }
.dd-conn-name small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #3f7d5c; }
.dd-conn-name small i { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; }
.dd-conn-btn { padding: 7px 12px; border: 1px solid var(--dd-line); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #4a4652; }
.dd-conn li.is-target { background: #faf8ff; }
.dd-conn li.is-target .dd-conn-btn { border-color: var(--dd-purple); color: var(--dd-purple-deep); box-shadow: 0 0 0 4px #764ff626; }
.dd-confirm { position: absolute; top: 116px; inset-inline-end: 22px; width: min(300px, calc(100% - 44px)); padding: 18px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e1f0, 0 24px 50px -12px #1a103d47; }
.dd-confirm::before { content: ''; position: absolute; top: -7px; inset-inline-end: 42px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: -1px -1px 0 #e6e1f0; }
.dd-confirm-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--dd-ink); }
.dd-confirm p:not(.dd-confirm-title) { margin: 0; font-size: 13px; line-height: 1.5; color: var(--dd-muted); }
.dd-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dd-confirm-actions span { padding: 7px 12px; border: 1px solid var(--dd-line); border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #4a4652; }
.dd-confirm-actions .is-danger { border-color: #c2364a; background: #c2364a; color: #fff; }
.dd-mock figcaption { margin-top: 14px; font-size: 13px; color: var(--dd-faint); text-align: center; }

/* Option 2 */
.dd-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: end; margin-bottom: 52px; }
.dd-head > p { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--dd-body); }
.dd-platforms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dd-line); }
.dd-platform { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 40px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--dd-line); scroll-margin-top: 80px; }
.dd-platform-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dd-logos { display: flex; flex: 0 0 auto; }
.dd-logo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 13px; background: #fff; border: 1px solid var(--dd-line-soft); box-shadow: 0 1px 2px #15151a0d; }
.dd-logo + .dd-logo { margin-inline-start: -12px; box-shadow: 0 0 0 3px #fff, 0 1px 2px #15151a0d; }
.dd-logo img { width: 26px; height: 26px; object-fit: contain; }
.dd-platform h3 { margin: 0; font: 600 19px/1.25 var(--dd-font); letter-spacing: -.02em; color: var(--dd-ink); }
.dd-platform-note { display: block; margin-top: 3px; font-size: 14px; color: var(--dd-muted); }
.dd-platform-paths { display: grid; gap: 14px; min-width: 0; }
.dd-path { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.dd-path:not(:has(.dd-path-label)) { grid-template-columns: minmax(0, 1fr); }
.dd-path-label { font-size: 13px; font-weight: 600; color: var(--dd-faint); }
.dd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; padding: 0; list-style: none; }
.dd-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.dd-crumbs li + li::before { content: ''; width: 7px; height: 7px; margin-inline: 10px 12px; border-top: 1.5px solid #a8a2b3; border-right: 1.5px solid #a8a2b3; transform: rotate(45deg); flex: 0 0 auto; }
.dd-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 11px; border: 1px solid #e6e3ec; border-radius: 8px; background: #f7f6f9; font-size: 14.5px; line-height: 1.25; color: var(--dd-ink); overflow-wrap: anywhere; }
.dd-chip-link { border-color: #d9ccff; background: var(--dd-lilac-soft); color: var(--dd-link); font-weight: 600; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.dd-chip-link:hover { background: var(--dd-lilac); border-color: #b9a2ff; }
.dd-ext { width: 14px; height: 14px; flex: 0 0 auto; transform: rotate(-45deg); }
.dd-chip-end { border-color: var(--dd-purple); background: var(--dd-purple); color: #fff; font-weight: 600; }
.dd-platform-text { margin: 0; max-width: 40em; font-size: 15.5px; line-height: 1.6; color: var(--dd-body); }

/* Option 3 */
.dd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dd-mail { margin: 0; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #e7e2f1, 0 40px 80px -30px #35107040; }
.dd-mail-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 15px 24px; border-bottom: 1px solid var(--dd-line-soft); font-size: 14.5px; }
.dd-mail-row span { color: var(--dd-faint); }
.dd-mail-row b { font-weight: 600; color: var(--dd-ink); overflow-wrap: anywhere; }
.dd-mail-body { padding: 24px 24px 30px; font-size: 15.5px; line-height: 1.6; color: var(--dd-body); }
.dd-mail-body p { margin: 0; }
.dd-mail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px !important; }
.dd-mail-chips span { padding: 5px 12px; border-radius: 999px; background: var(--dd-lilac); color: var(--dd-purple-deep); font-size: 13.5px; font-weight: 600; }
.dd-mail-chips em { font-style: normal; font-size: 13.5px; color: var(--dd-faint); }
.dd-mail-chips .is-all { background: var(--dd-purple); color: #fff; }

.dd-timeline { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 80px 0 0; padding: 0; list-style: none; }
.dd-timeline li { position: relative; padding-top: 34px; }
.dd-timeline li::before { content: ''; position: absolute; top: 0; inset-inline-start: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--dd-purple); }
.dd-timeline li:not(:last-child)::after { content: ''; position: absolute; top: 6px; inset-inline: 24px -14px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--dd-purple), #cbbaff); }
.dd-when { display: block; font-size: 14px; font-weight: 600; color: var(--dd-link); }
.dd-timeline strong { display: block; margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: -.025em; color: var(--dd-ink); }
.dd-code-note { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 40px 0 0; padding: 16px 20px; border: 1px solid #e4dff0; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5; color: var(--dd-body); }
.dd-code-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--dd-purple); }

/* Meta requests and the code lookup */
.dd-meta-mark { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 28px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #e4dcfb, 0 12px 30px -12px #3510703d; }
.dd-meta-mark img { width: 38px; height: 38px; object-fit: contain; }
.dd-url { margin: 24px 0 0; font-size: 15px; color: var(--dd-muted); }
.dd-url code { display: block; width: fit-content; max-width: 100%; margin-top: 10px; padding: 10px 14px; border: 1px solid #ddd2fb; border-radius: 8px; background: #fff; font: 500 13.5px/1.5 var(--dd-mono); color: var(--dd-ink); overflow-wrap: anywhere; }
.dd-url code span { color: var(--dd-link); }

.dd-lookup { padding: 34px; border-radius: 18px; background: #fff; color: var(--dd-ink); box-shadow: 0 0 0 1px #e7e2f1, 0 40px 80px -30px #35107040; }
.dd-lookup-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.dd-lookup-intro { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--dd-muted); }
.dd-label { display: block; margin: 26px 0 8px; font-size: 14px; font-weight: 600; }
.dd-field { display: flex; gap: 10px; }
.dd-field input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid #cfc8dc; border-radius: 8px; background: #fff; color: var(--dd-ink); font: 500 15.5px var(--dd-mono); letter-spacing: .02em; transition: border-color .18s ease, box-shadow .18s ease; }
.dd-field input::placeholder { font-family: var(--dd-font); letter-spacing: 0; color: #9a94a5; }
.dd-field input:focus { outline: none; border-color: var(--dd-purple); box-shadow: 0 0 0 4px #764ff633; }
.dd-lookup .dd-btn:focus-visible { outline: 3px solid var(--dd-link); outline-offset: 3px; }

/* Closing */
.dd-closing { padding: 96px 0 104px; }
.dd-closing-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
.dd-closing h2 { font-size: 26px; letter-spacing: -.03em; }
.dd-keep { display: flex; gap: 20px; padding: 34px; border: 1px solid #ebe8ef; border-radius: 18px; background: var(--dd-paper); }
.dd-keep-icon { flex: 0 0 auto; width: 34px; height: 34px; color: var(--dd-purple); }
.dd-keep p, .dd-questions p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--dd-body); }
.dd-questions { padding: 34px; border-radius: 18px; background: var(--dd-purple); color: #fff; }
.dd-questions h2 { color: #fff; }
.dd-questions p { color: #f0eaff; }
.dd-questions a { color: #fff; font-weight: 600; text-decoration-color: #cbb9ff; }
.dd-questions a:hover { text-decoration-color: #fff; }
.dd-questions a:focus-visible { outline-color: #fff; }

/* Status page */
.dd-hero-status { padding: 56px 0 112px; min-height: 64vh; }
.dd-status-wrap { position: relative; z-index: 1; max-width: 760px; }
.dd-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #f0eaff; text-decoration: none; }
.dd-back:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.dd-back-icon { width: 16px; height: 16px; transform: rotate(180deg); }
.dd-hero-status h1 { margin: 22px 0 36px; font-size: clamp(44px, 5.4vw, 72px); }
.dd-status-card { margin-bottom: 20px; padding: 32px; border-radius: 18px; background: #fff; color: var(--dd-ink); box-shadow: 0 30px 70px #2a0c7a33; }
.dd-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--dd-line-soft); }
.dd-status-label { margin: 0; font-size: 13px; color: var(--dd-faint); }
.dd-status-code { margin: 6px 0 0; font: 500 22px/1.3 var(--dd-mono); letter-spacing: .02em; overflow-wrap: anywhere; }
.dd-pill { flex: 0 0 auto; margin: 0; padding: 6px 12px; border-radius: 999px; background: #f1f0f4; color: var(--dd-body); font-size: 13px; font-weight: 600; white-space: nowrap; }
[data-state="received"] .dd-pill { background: var(--dd-lilac); color: var(--dd-purple-deep); }
[data-state="in_progress"] .dd-pill { background: #fff3d6; color: #835400; }
[data-state="completed"] .dd-pill { background: #e2f5eb; color: #17734c; }
[data-state="not_found"] .dd-pill { background: #fdeaec; color: #a8202f; }

.dd-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.dd-track li { position: relative; padding-top: 42px; }
.dd-track li:not(:last-child)::before { content: ''; position: absolute; top: 13px; inset-inline: 36px -8px; height: 2px; border-radius: 2px; background: #e4e0ec; }
.dd-track li.is-done:has(+ li.is-done, + li.is-current)::before { background: var(--dd-purple); }
.dd-track strong { display: block; font-size: 15px; font-weight: 600; }
.dd-track [data-dd-date] { display: block; margin-top: 4px; font-size: 13.5px; color: var(--dd-faint); }
.dd-track li:not(.is-done):not(.is-current) strong { color: #9a94a5; }
.dd-track-dot { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid #dcd7e6; border-radius: 50%; background: #fff; }
.dd-track-check { width: 14px; height: 14px; color: #fff; opacity: 0; }
.dd-track li.is-done .dd-track-dot { border-color: var(--dd-purple); background: var(--dd-purple); }
.dd-track li.is-done .dd-track-check { opacity: 1; }
.dd-track li:not(.is-done) .dd-track-check { display: none; }
.dd-track li.is-current .dd-track-dot { border-color: var(--dd-purple); box-shadow: 0 0 0 5px #764ff624; }
.dd-track li.is-current .dd-track-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--dd-purple); animation: dd-pulse 1.8s ease-in-out infinite; }
@keyframes dd-pulse { 50% { transform: scale(.6); opacity: .55; } }
.dd-status-platforms { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 26px 0 0; font-size: 14.5px; }
.dd-status-platforms span { color: var(--dd-faint); }
.dd-status-platforms b { font-weight: 600; }
.dd-status-msg p { margin: 26px 0 0; padding: 16px 18px; border-radius: 12px; background: var(--dd-paper); font-size: 15px; line-height: 1.55; color: var(--dd-body); }
.dd-status-loading { margin: 26px 0 0; font-size: 15px; color: var(--dd-faint); }
.dd-status-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-inline-start: 10px; vertical-align: -2px; border: 2px solid #d9ccff; border-top-color: var(--dd-purple); border-radius: 50%; animation: dd-spin .8s linear infinite; }
@keyframes dd-spin { to { transform: rotate(360deg); } }
.dd-status:not([data-state="lookup"]) .dd-lookup { padding: 26px 30px; }
.dd-noscript { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: #f0eaff; }
.dd-noscript a { color: #fff; font-weight: 600; }

/* Arabic (/ar/data-deletion). Offsets above are logical, so the layout
   mirrors on its own; this block covers type and the things that point
   somewhere: arrows, chevrons, gradients and the hero decoration. */
[lang|="ar"] .dd-page { --dd-font: 'DD Plex Arabic', 'IBM Plex Sans Arabic', 'DD Plex', sans-serif; }
[lang|="ar"] .dd-hero *, [lang|="ar"] .dd-section * { letter-spacing: 0; }
[lang|="ar"] .dd-hero h1 { line-height: 1.2; }
[lang|="ar"] .dd-section h2 { line-height: 1.3; }
[lang|="ar"] .dd-lede { line-height: 1.55; }
[lang|="ar"] .dd-timeline strong, [lang|="ar"] .dd-route-body strong, [lang|="ar"] .dd-routes-title { line-height: 1.45; }
.dd-head-note { display: block; margin-top: 12px; font-size: 14.5px; color: var(--dd-muted); }
[dir="rtl"] .dd-hero::before { inset: -40% auto auto -10%; }
[dir="rtl"] .dd-hero::after { left: auto; right: -180px; }
[dir="rtl"] .dd-btn-icon, [dir="rtl"] .dd-route-arrow { transform: scaleX(-1); }
[dir="rtl"] .dd-btn:hover .dd-btn-icon { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .dd-route:hover .dd-route-arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .dd-back-icon { transform: none; }
[dir="rtl"] .dd-crumbs li + li::before { transform: rotate(-135deg); }
[dir="rtl"] .dd-status-code { text-align: right; }
[dir="rtl"] .dd-field input:not(:placeholder-shown) { direction: ltr; text-align: right; }
[dir="rtl"] .dd-url code span[lang] { font-family: var(--dd-font); font-weight: 600; }
@media (min-width: 761px) {
  [dir="rtl"] .dd-timeline li:not(:last-child)::after { background: linear-gradient(270deg, var(--dd-purple), #cbbaff); }
}

@media (prefers-reduced-motion: reduce) {
  .dd-page *, .dd-page *::before, .dd-page *::after { animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 1100px) {
  .dd-hero-grid, .dd-split, .dd-head { gap: 56px; }
  .dd-platform { grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
  .dd-path { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 960px) {
  .dd-hero { padding: 56px 0 72px; }
  .dd-hero-grid, .dd-split, .dd-head { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .dd-head { gap: 20px; margin-bottom: 40px; }
  .dd-routes { max-width: 640px; }
  .dd-section { padding: 88px 0; }
  .dd-mock, .dd-mail, .dd-lookup { max-width: 640px; }
  .dd-platform { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 0; }
}
@media (max-width: 760px) {
  .dd-closing-grid { grid-template-columns: minmax(0, 1fr); }
  .dd-timeline { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 64px; }
  .dd-timeline li { padding: 0; padding-inline-start: 36px; }
  .dd-timeline li::before { top: 4px; }
  .dd-timeline li:not(:last-child)::after { top: 26px; bottom: -20px; inset-inline: 6px auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--dd-purple), #cbbaff); }
}
@media (max-width: 560px) {
  .dd-wrap { width: calc(100% - 40px); }
  .dd-hero { padding: 40px 0 56px; }
  .dd-hero h1 { font-size: 54px; }
  .dd-lede { font-size: 20px; }
  .dd-clock { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .dd-clock > div, .dd-clock > div + div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-inline-start: 0; border-bottom: 1px solid #ffffff2e; }
  .dd-clock dt { font-size: 16px; }
  .dd-clock dd { margin: 0; }
  .dd-routes { padding: 20px 20px 0; }
  .dd-route { grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; padding: 16px 0; }
  .dd-route-num { width: 34px; height: 34px; font-size: 14px; }
  .dd-route-body strong { font-size: 16px; }
  .dd-route-status { margin: 0 -20px; padding: 15px 20px; }
  .dd-section { padding: 64px 0; }
  .dd-section h2 { font-size: 32px; }
  .dd-section.dd-closing h2 { font-size: 24px; }
  .dd-body, .dd-head > p { font-size: 16.5px; }
  .dd-steps li { font-size: 16.5px; gap: 14px; }
  .dd-window-body { padding: 20px 16px 20px; }
  .dd-conn li { padding: 13px 12px; gap: 10px; grid-template-columns: 26px minmax(0, 1fr) auto; }
  .dd-conn img { width: 26px; height: 26px; }
  .dd-confirm { position: relative; top: auto; inset-inline-end: auto; width: auto; margin: 16px 0 0; }
  .dd-confirm::before { display: none; }
  .dd-actions { flex-direction: column; align-items: stretch; }
  .dd-mail-row { grid-template-columns: 62px minmax(0, 1fr); padding: 13px 18px; font-size: 14px; }
  .dd-mail-body { padding: 20px 18px 24px; }
  .dd-timeline strong { font-size: 19px; }
  .dd-code-note { align-items: flex-start; }
  .dd-lookup { padding: 24px 20px; }
  .dd-field { flex-direction: column; }
  .dd-closing { padding: 56px 0 64px; }
  .dd-keep, .dd-questions { padding: 26px 22px; }
  .dd-keep { flex-direction: column; gap: 14px; }
  .dd-status-card { padding: 24px 20px; }
  .dd-status-head { flex-direction: column; gap: 12px; }
  .dd-track { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dd-track li { padding: 2px 0 0; padding-inline-start: 44px; min-height: 28px; }
  .dd-track li:not(:last-child)::before { top: 34px; bottom: -14px; inset-inline: 13px auto; width: 2px; height: auto; }
}