/* Shared styling for privacy.html, support.html and delete-account.html.
   Palette and type match the planner and the marketing page. */
:root{
  --ink:#0b160c; --panel:#111f12; --panel-2:#16281a;
  --amber:#e09a28; --green:#4f8f59; --pale:#e6edd8;
  --muted:#6a8b6e; --red:#ff5c4d; --rule:rgba(230,237,216,.13);
  --display:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--ink);color:var(--pale);font-family:var(--display);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  padding:0 0 72px;
}
.wrap{width:min(720px,90vw);margin-inline:auto}

header.top{border-bottom:1px solid var(--rule);padding:20px 0;margin-bottom:44px}
.brandline{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:-.03em;font-size:18px}
.brandline b{color:var(--amber)}
.brandline small{font-family:var(--mono);font-size:10px;font-weight:400;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.brandline a{color:inherit;text-decoration:none}

.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
h1{font-size:clamp(1.9rem,5vw,2.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin-bottom:16px}
h2{font-size:1.18rem;font-weight:700;letter-spacing:-.02em;margin:38px 0 12px;color:var(--pale)}
h3{font-size:1rem;font-weight:700;margin:24px 0 8px}
p{color:#b9c9ae;margin-bottom:14px}
ul{margin:0 0 16px 20px;color:#b9c9ae}
li{margin-bottom:7px}
a{color:var(--green)}
.updated{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;margin-bottom:36px}

.panel{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:24px;margin:22px 0}
.panel.warn{border-color:rgba(255,92,77,.35);background:rgba(255,92,77,.06)}
.panel h3{margin-top:0}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
td{color:#b9c9ae}

label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
input,textarea,select{
  width:100%;background:rgba(230,237,216,.06);border:1px solid var(--rule);
  border-radius:9px;padding:13px 14px;color:var(--pale);
  font-family:var(--display);font-size:max(16px,1rem);
}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-size:15px;font-weight:700;
  padding:13px 24px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;min-height:46px;
  transition:background .18s,transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn-primary{background:var(--amber);color:#1a1205}
.btn-primary:hover:not(:disabled){background:#f0ad3c}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover:not(:disabled){background:#ff6f61}
.btn-ghost{border-color:var(--rule);color:var(--pale);background:transparent}
.btn-ghost:hover{background:rgba(230,237,216,.07)}
.btn-row{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}

.note{font-size:.83rem;color:var(--muted);margin-top:12px}
.status{padding:13px 15px;border-radius:9px;margin-top:18px;font-size:.9rem;display:none}
.status.ok{display:block;background:rgba(79,143,89,.14);border:1px solid rgba(79,143,89,.4);color:#8fd39a}
.status.err{display:block;background:rgba(255,92,77,.12);border:1px solid rgba(255,92,77,.4);color:#ff8f83}

footer.bot{border-top:1px solid var(--rule);margin-top:56px;padding-top:24px;font-size:13px;color:var(--muted)}
footer.bot nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px}
footer.bot a{text-decoration:none}
footer.bot a:hover{text-decoration:underline}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}