/* Gardn — the legal pages (privacy, terms, delete account) and the 404 page.
 * The home page's night-green frames a light, readable page: these are
 * documents, and they are read, not scrolled past. */
:root {
  --deep: #0D2218;
  --cream: #EFE9DA;
  --mint: #9FDDBA;
  --paper: #F5F2EA;
  --ink: #15261D;
  --soft: #4B5A51;
  --line: rgba(21, 38, 29, .14);
  --link: #1F6B4B;
  --serif: 'Instrument Serif', 'Frank Ruhl Libre', 'Amiri', Georgia, serif;
  --sans: 'Geist', 'Heebo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --menu-bg: #FFFFFF;
  --menu-ink: #0D2218;
}
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; }
[lang="he"] body, [lang="ar"] body { font-size: 18px; }
a { color: var(--link); }
::selection { background: var(--mint); color: var(--deep); }

/* ---- top bar ---- */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px; padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 56px) 12px; background: var(--deep); color: var(--cream); }
.top a { color: inherit; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.brand img { border-radius: 8px; }
.top-end { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.btn { display: inline-flex; align-items: center; padding: .7em 1.25em; border-radius: 999px; background: var(--mint); color: var(--deep) !important; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform .25s; }
.btn:hover { transform: translateY(-2px); }
@media (max-width: 560px) { .top .btn { display: none; } }

/* ---- the document ---- */
.legal { max-width: 46rem; margin-inline: auto; padding: clamp(28px, 5vw, 64px) clamp(18px, 5vw, 32px) clamp(60px, 9vw, 110px); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); }
.legal-tabs a { text-decoration: none; color: var(--ink); font-size: .95rem; padding: .4em .95em; border-radius: 999px; border: 1px solid var(--line); background: #fff; transition: border-color .2s; }
.legal-tabs a:hover { border-color: var(--ink); }
.legal-tabs a[aria-current="page"] { background: var(--deep); color: var(--cream); border-color: var(--deep); }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
[lang="he"] .legal h1 { font-weight: 500; line-height: 1.12; }
[lang="ar"] .legal h1 { line-height: 1.45; }
.updated { margin-top: .8rem; font-family: var(--mono); font-size: .85rem; color: var(--soft); }
[lang="he"] .updated, [lang="ar"] .updated { font-family: var(--sans); }
.lede { margin-top: 1.6rem; font-size: 1.18rem; line-height: 1.6; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.15; margin-top: 2.6rem; margin-bottom: .6rem; }
[lang="he"] .legal h2 { font-weight: 500; }
[lang="ar"] .legal h2 { line-height: 1.5; }
.legal p + p { margin-top: .8rem; }

.points { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: p; }
.points li { position: relative; padding-block: 1.1rem; padding-inline-start: 3rem; border-top: 1px solid var(--line); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.points li::before { counter-increment: p; content: counter(p, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 1.35rem; font-family: var(--mono); font-size: .8rem; color: var(--soft); }
.points b { font-weight: 700; }

.contact-box { margin-top: 2.6rem; background: #fff; border-radius: 18px; padding: 22px 26px; border: 1px solid var(--line); }
.contact-box h2 { margin-top: 0; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; padding-inline-start: 3.5rem; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; inset-inline-start: 16px; top: 15px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--cream); font-size: .85rem; font-weight: 600; line-height: 1; }
.ui { display: inline-block; font-weight: 600; line-height: 1.4; padding: .05em .55em; border-radius: 8px; background: rgba(13, 34, 24, .06); border: 1px solid var(--line); }
.note { margin-block: 1.8rem; background: #FFF4D6; border-inline-start: 4px solid #E0A93A; border-radius: 12px; padding: 16px 20px; }
.back { margin-top: 3rem; }
.back a { text-decoration: none; font-weight: 600; }

.notfound { min-height: 58svh; }

.foot { padding: 56px clamp(18px, 6vw, 110px) calc(40px + env(safe-area-inset-bottom, 0px)); background: var(--deep); color: #A3B7AA; }
.foot a { color: inherit; }
.foot .g-foot-brand b { color: var(--cream); font-family: var(--serif); font-weight: 400; font-size: 1.6rem; }

/* ---- delete-account: the way that needs no app, first and prominent ---- */
.request { margin-top: 2rem; background: var(--deep); color: var(--cream); border-radius: 20px; padding: 26px 28px 24px; }
.request h2 { margin-top: 0; color: var(--cream); }
.request a { color: var(--mint); }
.request p + p { margin-top: .6rem; }
.req-btn { display: inline-flex; align-items: center; gap: .5em; margin-top: .4rem; padding: .85em 1.4em; border-radius: 999px; background: var(--mint); color: var(--deep) !important; font-weight: 700; font-size: 1.08rem; text-decoration: none; transition: transform .25s; }
.req-btn::before { content: "✉"; font-size: 1.1em; line-height: 1; }
.req-btn:hover { transform: translateY(-2px); }
.req-to { font-family: var(--mono); font-size: .95rem; }
.request .scope { opacity: .8; font-size: .96rem; }