:root {
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f1f3f2;
  --text:#14181e;
  --text-soft:#39434f;
  --text-mute:#6c7681;
  --border:#dce1df;
  --accent:#0e8c7a;
  --accent-strong:#0a6b5c;
  --accent-wash:#e4efed;
  --header-bg:rgba(255,255,255,0.88);
  --font-display:'Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:820px;
  --pad:clamp(1.25rem,5vw,4rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1319;
    --surface:#161b22;
    --surface-2:#1b212a;
    --text:#e9edf1;
    --text-soft:#aeb8c2;
    --text-mute:#8a95a1;
    --border:#262d37;
    --accent:#19a894;
    --accent-strong:#3fd0bd;
    --accent-wash:#123029;
    --header-bg:rgba(15,19,25,0.85);
  }
}

:root[data-theme="dark"] {
  --bg:#0f1319;
  --surface:#161b22;
  --surface-2:#1b212a;
  --text:#e9edf1;
  --text-soft:#aeb8c2;
  --text-mute:#8a95a1;
  --border:#262d37;
  --accent:#19a894;
  --accent-strong:#3fd0bd;
  --accent-wash:#123029;
  --header-bg:rgba(15,19,25,0.85);
}

* { box-sizing:border-box; }
html { color-scheme:light dark; }
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}

a { color:var(--accent-strong); text-underline-offset:3px; }
a:hover { color:var(--accent); }
a:focus-visible,
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wide-wrap {
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.content-wrap {
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

header {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(150%) blur(10px);
}

.nav {
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand {
  display:flex;
  align-items:center;
  gap:.65rem;
  color:var(--text);
  text-decoration:none;
  flex:0 0 auto;
}

.brand-mark { width:42px; height:42px; flex:0 0 auto; }
.brand-mark svg { width:100%; height:100%; display:block; }
.brand-mark .s-ink { stroke:var(--text); }
.brand-mark .s-teal { stroke:var(--accent); }
.brand-copy { display:flex; flex-direction:column; gap:4px; }
.brand-name {
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  white-space:nowrap;
}
.brand-desc {
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.47rem;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  color:var(--text-mute);
  white-space:nowrap;
}
.brand-desc b { color:var(--accent); font-weight:500; }

.nav-actions { display:flex; align-items:center; gap:1rem; }
.nav-links { display:flex; align-items:center; gap:1.4rem; }
.nav-links a {
  color:var(--text-soft);
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color:var(--accent-strong); }

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  color:var(--text-soft);
  cursor:pointer;
}
.theme-toggle:hover { color:var(--accent-strong); border-color:var(--accent); }
.theme-toggle svg { width:18px; height:18px; }

main { flex:1; }
.page-hero { padding:clamp(3rem,8vw,5.5rem) 0 2.3rem; }
.app-logo {
  display:block;
  width:clamp(104px,18vw,144px);
  aspect-ratio:1;
  object-fit:cover;
  border:1px solid var(--border);
  border-radius:25%;
  box-shadow:0 18px 42px -26px rgba(0,0,0,.55);
  margin-bottom:1.6rem;
}
.eyebrow {
  display:block;
  margin:0 0 .8rem;
  color:var(--accent-strong);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h1,h2 {
  margin:0;
  color:var(--text);
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
}
h1 { font-size:clamp(2.35rem,7vw,4.25rem); font-weight:800; }
h2 { margin:2.5rem 0 .65rem; font-size:clamp(1.32rem,3vw,1.65rem); }
.updated {
  margin:.75rem 0 0;
  color:var(--text-mute);
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
}
.intro {
  margin:1.35rem 0 0;
  color:var(--text-soft);
  font-size:clamp(1.04rem,2vw,1.2rem);
}
.policy-content { padding-bottom:clamp(3.5rem,8vw,6rem); }
.policy-content section {
  border-top:1px solid var(--border);
  padding-top:.1rem;
}
.policy-content p { margin:.7rem 0 0; color:var(--text-soft); }
.contact-block {
  margin-top:.8rem;
  padding:1.25rem 1.35rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text-soft);
}
.contact-block a { font-weight:600; }

.end-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.65rem 1.1rem;
  margin-top:3rem;
  padding-top:1.4rem;
  border-top:1px solid var(--border);
  font-size:.92rem;
}
.end-links a { font-weight:600; text-decoration:none; }
.end-links span { color:var(--border); }

footer {
  padding:2rem 0;
  border-top:1px solid var(--border);
  color:var(--text-mute);
  font-size:.82rem;
}

@media (max-width:760px) {
  .nav { height:68px; }
  .brand-mark { width:34px; height:34px; }
  .brand-name { font-size:1.2rem; }
  .brand-desc { display:none; }
  .nav-links { display:none; }
}

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