/* Tempi website styles. Quiet-luxury dark brand: ink ground, ivory text, brass
   accent, gait colours as the only other hues. Shared by the landing and legal
   pages. */
:root {
  --ink:#141B2D; --surface:#1C2338; --surface-2:#232C45; --line:#33405E;
  --ivory:#F4EEE2; --ivory-soft:#CFC9BC; --muted:#9AA0AE; --brass:#C9A45C;
  --walk:#8FA98B; --trot:#D9A44A; --canter:#9C3D54;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:'Inter', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin:0; }
body { background:var(--ink); color:var(--ivory); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
.wrap { max-width:1000px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); }
a { color:var(--brass); }
h1,h2,h3 { font-family:var(--display); font-weight:600; text-wrap:balance; margin:0; }

/* Header */
header.site { display:flex; align-items:center; gap:12px; padding-block:22px; }
.markname { font-family:var(--display); font-size:24px; font-weight:600; color:var(--ivory); text-decoration:none; }
.nav { margin-left:auto; display:flex; gap:20px; font-size:14px; }
.nav a { color:var(--ivory-soft); text-decoration:none; }
.nav a:hover { color:var(--brass); }

/* Hero */
.hero { text-align:center; padding-block:40px 56px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero h1 { font-size:clamp(52px, 11vw, 92px); line-height:0.95; letter-spacing:.5px; color:var(--ivory); }
.tagline { font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--brass); }
.lede { max-width:40ch; color:var(--ivory-soft); font-size:17px; }
.badge { margin-top:8px; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 16px; }
.badge .dot { width:7px; height:7px; border-radius:50%; background:var(--brass); }

/* Bands */
.band { padding-block:46px; border-top:1px solid var(--line); }
.eyebrow { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); }
.band h2 { font-size:clamp(28px,5vw,40px); margin-top:8px; color:var(--ivory); }

/* Feature grid */
.features { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:26px; }
.feature { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; }
.feature .mk { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.feature .mk span { width:12px; height:12px; border-radius:50%; display:block; }
.feature h3 { font-size:21px; color:var(--ivory); }
.feature p { color:var(--ivory-soft); font-size:15px; margin:8px 0 0; }

.note { margin-top:26px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:18px 20px; color:var(--ivory-soft); font-size:15px; }
.note strong { color:var(--ivory); }

/* Support */
.support-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
.support-card { flex:1 1 220px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; }
.support-card .k { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.support-card .v { font-size:17px; color:var(--ivory); margin-top:6px; word-break:break-word; }
.ph { color:var(--brass); background:rgba(201,164,92,.12); padding:0 4px; border-radius:4px; }

/* Footer */
footer.site { border-top:1px solid var(--line); padding-block:30px 50px; color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:10px 24px; align-items:baseline; }
footer .legal a { color:var(--ivory-soft); text-decoration:none; margin-left:16px; }
footer .legal a:hover { color:var(--brass); }

/* Legal pages */
.legal { max-width:72ch; margin:0 auto; padding-block:16px 40px; }
.legal h1 { font-size:clamp(34px,7vw,52px); color:var(--ivory); }
.legal .meta { color:var(--ivory-soft); font-size:15px; margin-top:14px; }
.legal .meta li { margin:3px 0; }
.legal h2 { font-size:25px; color:var(--ivory); margin-top:34px; }
.legal p, .legal li { color:var(--ivory-soft); font-size:15.5px; }
.legal ul { padding-left:20px; }
.legal strong { color:var(--ivory); }
.draft { background:rgba(217,164,74,.14); border:1px solid rgba(217,164,74,.4); border-radius:12px; padding:14px 16px; color:var(--trot); font-size:14px; margin-top:18px; }
.ph2 { color:var(--brass); background:rgba(201,164,92,.12); padding:0 4px; border-radius:4px; }

@media (max-width:560px){ .features{ grid-template-columns:1fr; } .nav{ gap:14px; } }