/* Urge Buddy: the app's warm sand (KipSand), terracotta accent and navy ink. Light only, like the app. */
:root{
  --ink:#15234A;
  --ink2:#3C4A6E;
  --mute:#6B7690;
  --accent:#C4693D;
  --accent-dark:#A9552D;
  --on-accent:#FFF6E6;
  --ring:#EFD6BC;
  --card:#FFFBF5;
  --sage:#7E9A78;
  --line:rgba(21,35,74,.1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; min-height:100%; background:#F8F2E9 linear-gradient(180deg,#F8F2E9 0%,#F3E9DC 55%,#EEE1CF 100%) no-repeat; background-size:100% 100%}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font:400 17px/1.6 'Jost',system-ui,-apple-system,sans-serif;
  background:transparent;
}
a{color:var(--accent-dark)}
a:hover{color:var(--accent)}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.narrow{max-width:720px}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink)}
.brand img{width:38px; height:38px; border-radius:9px; box-shadow:0 3px 10px rgba(80,50,20,.14)}
.brand span{font:600 23px/1 'Cormorant Garamond',Georgia,serif; letter-spacing:.01em}
.nav-links{display:flex; gap:22px; font-size:15px}
.nav-links a{color:var(--ink2); text-decoration:none}
.nav-links a:hover{color:var(--accent)}

/* legal and support pages */
.doc{background:rgba(255,251,245,.82); border:1px solid rgba(255,255,255,.95); border-radius:24px; padding:44px 48px; margin:24px auto 72px}
.doc h1{font:600 clamp(36px,5vw,48px)/1.08 'Cormorant Garamond',Georgia,serif; margin:0 0 6px}
.doc .updated{color:var(--mute); font-size:14px; margin:0 0 28px}
.doc h2{font:600 26px/1.2 'Cormorant Garamond',Georgia,serif; margin:34px 0 10px}
.doc h3{font-size:17px; font-weight:600; margin:22px 0 6px}
.doc p,.doc li{color:var(--ink2)}
.doc ul{padding-left:22px}
.doc li{margin:5px 0}
.doc .table{overflow-x:auto}
.doc table{width:100%; border-collapse:collapse; font-size:15px; margin:12px 0}
.doc th,.doc td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{color:var(--ink); font-weight:600}
.callout{background:#FBEADB; border-radius:16px; padding:16px 20px; margin:18px 0}
.callout p{margin:0}

/* footer */
.footer{padding:28px 0 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:var(--ink2)}
.footer nav{display:flex; gap:20px; flex-wrap:wrap}
.footer a{color:var(--ink2); text-decoration:none}
.footer a:hover{color:var(--accent)}

@media (max-width:560px){
  .wrap{padding:0 16px}
  .doc{padding:28px 20px; border-radius:20px}
  .nav-links{gap:16px}
  .nav-links a.hide-sm{display:none}
}