/*
  I am Kind, website styles for the legal pages (privacy + terms).
  Dark theme — Claude Design system v1.0 (April 2026 rebrand).
  Minimal, legible, adheres to WCAG AA contrast.
*/

:root {
    --bg: #0B0A0E;            /* ink — warm near-black, matches design system */
    --surface: #15131A;       /* ink-2 — raised surface (TOC card, etc.) */
    --text-primary: #F4EFE8;  /* on-ink — warm cream */
    --text-secondary: #A39DA0; /* on-ink-muted */
    --text-tertiary: #6E6770;  /* on-ink-faint */
    --accent: #C9526B;         /* orb-mid — peach, not the deeper edge */
    --border: #2A2632;         /* ink-4 hairline */
    --max-width: 760px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 64px 24px 96px;
    width: 100%;
}

header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 24px 0;
    width: 100%;
}

header .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
}

header .brand-orb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFD4D4 0%, #8B2D3F 45%, #3D1018 100%);
    box-shadow: 0 0 24px rgba(180, 70, 90, 0.45);
    flex: 0 0 28px;
}

nav {
    margin-top: 24px;
    display: flex;
    gap: 24px;
    font-size: 15px;
}

nav a {
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 180ms ease;
}

nav a:hover,
nav a:focus,
nav a[aria-current="page"] {
    color: var(--accent);
}

h1 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.15;
}

.effective-date {
    color: var(--text-tertiary);
    font-size: 14px;
    margin-bottom: 32px;
}

/* ─── Table of contents ─── */
/* Sits between the effective-date line and the first content section.
   Numbered list (CSS counter) of every h2 in the document, each linking
   to its own anchor ID via slugified hashes. Quiet panel chrome so the
   TOC doesn't compete with the first content section. */
.toc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 32px 24px;
    margin-bottom: 48px;
}

.toc-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 18px 0;
    padding: 0;
}

.toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-item;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 24px;
}

@media (max-width: 600px) {
    .toc ol { grid-template-columns: 1fr; }
    .toc { padding: 22px 22px 18px; }
}

.toc li {
    counter-increment: toc-item;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
}

.toc li::before {
    content: counter(toc-item, decimal-leading-zero);
    font-size: 11px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.toc a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 180ms ease, color 180ms ease;
    flex: 1 1 auto;
}

.toc a:hover,
.toc a:focus {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-decoration: none;
}

/* When user clicks a TOC link and lands on a section, give the target
   a small highlight pulse so they know they arrived at the right place. */
:target {
    scroll-margin-top: 32px;
}
:target h2,
h2:target {
    color: var(--accent);
    transition: color 180ms ease;
}

h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-top: 40px;
    margin-bottom: 12px;
}

h2:first-of-type {
    margin-top: 0;
}

p {
    color: var(--text-secondary);
    font-size: 17px;
    margin-bottom: 14px;
}

ul {
    color: var(--text-secondary);
    font-size: 17px;
    padding-left: 24px;
    margin-bottom: 18px;
}

li {
    margin-bottom: 6px;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

a:hover,
a:focus {
    text-decoration-thickness: 2px;
}

footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px 24px 48px;
    width: 100%;
    border-top: 1px solid var(--border);
    color: var(--text-tertiary);
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

footer a {
    color: var(--text-tertiary);
}

/* Home page hero */
.hero {
    text-align: center;
    padding: 48px 0 64px;
}

.hero .mega-orb {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 32px;
    background: radial-gradient(circle at 35% 35%, #FFD4D4 0%, #8B2D3F 50%, #3D1018 100%);
    box-shadow: 0 0 80px rgba(180, 70, 90, 0.35), 0 0 180px rgba(180, 70, 90, 0.18);
}

.hero h1 {
    font-size: 56px;
    margin-bottom: 16px;
}

.hero .tagline {
    font-size: 22px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.4;
}

.hero .cta {
    display: inline-block;
    background: var(--accent);
    color: #0B0A0E;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.hero .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(180, 70, 90, 0.35);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 520px) {
    main { padding: 32px 20px 64px; }
    h1 { font-size: 32px; }
    .hero h1 { font-size: 40px; }
    .hero .tagline { font-size: 18px; }
    .hero .mega-orb { width: 160px; height: 160px; }
    h2 { font-size: 19px; margin-top: 32px; }
    p, ul, li { font-size: 16px; }
}