:root { color-scheme: dark; --ink: #edf7ef; --muted: #a9bbb0; --line: rgba(234, 255, 238, .14); --green: #8de063; --deep: #06150e; --card: #0b2116; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 80% 0, #193c22 0, transparent 33rem), var(--deep); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
a { color: #b5f58d; text-underline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; padding: .6rem 1rem; background: #fff; color: #000; }
.page-header { max-width: 1160px; min-height: 82px; margin: auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); text-decoration: none; display: flex; gap: 11px; align-items: center; line-height: 1.1; }
.brand img { border-radius: 12px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; letter-spacing: -.02em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: .72rem; }
.header-link { border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; color: var(--ink); font-size: .86rem; text-decoration: none; }
.hero { max-width: 1160px; margin: 50px auto 0; padding: 52px 28px 65px; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 12px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.04em; }
h1 { max-width: 720px; font-size: clamp(2.5rem, 6vw, 5.4rem); margin-bottom: 24px; }
h1 em, h2 em { color: var(--green); font-style: normal; }
.hero > p:not(.eyebrow):not(.updated) { max-width: 645px; color: #c3d2c7; font-size: 1.12rem; }
.updated { margin-top: 27px; color: var(--muted); font-size: .84rem; }
.content-shell { max-width: 1160px; margin: auto; padding: 54px 28px 90px; display: grid; grid-template-columns: 210px minmax(0, 750px); gap: 76px; }
.contents { align-self: start; position: sticky; top: 20px; border-left: 1px solid var(--line); padding-left: 17px; }
.contents p { color: var(--muted); font-size: .78rem; margin-bottom: 9px; }
.contents a { display: block; color: #bac9bd; font-size: .86rem; text-decoration: none; margin: 8px 0; }
.contents a:hover { color: var(--green); }
.policy-content section { margin-bottom: 62px; scroll-margin-top: 24px; }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); margin-bottom: 18px; }
h3 { font-size: 1.06rem; margin-bottom: 8px; }
.policy-content p { color: #c3d2c7; }
.data-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0 20px; }
.data-grid article, .deletion-details article { background: linear-gradient(145deg, rgba(28, 63, 39, .55), rgba(9, 30, 19, .75)); border: 1px solid var(--line); border-radius: 15px; padding: 22px; }
.data-grid article p, .deletion-details article p { margin-bottom: 0; font-size: .91rem; }
.deletion-section { border: 1px solid rgba(141, 224, 99, .38); border-radius: 24px; padding: clamp(25px, 5vw, 48px); background: linear-gradient(140deg, rgba(27, 83, 35, .52), rgba(9, 31, 19, .98) 60%); }
.deletion-heading { max-width: 650px; }
.deletion-heading h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-bottom: 15px; }
.deletion-steps { list-style: none; padding: 0; counter-reset: step; margin: 30px 0 26px; }
.deletion-steps li { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: start; margin: 17px 0; }
.deletion-steps li::before { counter-increment: step; content: "0" counter(step); color: var(--green); font-weight: 800; }
.deletion-steps strong { display: block; }
.deletion-steps span { grid-column: 2; color: #c3d2c7; font-size: .92rem; }
.delete-button { display: inline-flex; align-items: center; gap: 16px; border-radius: 12px; padding: 14px 20px; background: var(--green); color: #10210f; font-weight: 800; text-decoration: none; box-shadow: 0 8px 32px rgba(114, 219, 65, .17); }
.delete-button:hover { background: #b5f58d; }
.delete-button span { font-size: 1.25rem; }
.email-fallback { margin: 15px 0 0; font-size: .85rem; }
.deletion-details { display: grid; gap: 13px; margin-top: 36px; }
.deletion-details h3 { color: var(--green); }
footer { border-top: 1px solid var(--line); padding: 28px; text-align: center; color: var(--muted); font-size: .82rem; }
@media (max-width: 760px) { .page-header, .hero, .content-shell { padding-left: 20px; padding-right: 20px; } .hero { margin-top: 17px; } .content-shell { display: block; padding-top: 38px; } .contents { display: none; } .data-grid { grid-template-columns: 1fr; } .deletion-section { padding: 24px 20px; } }