/* Centli site — shared styles for the non-home pages (help, privacy, terms,
   delete, what's-new). Matches the homepage design language: ambient gradient
   field background, glass surfaces, Plus Jakarta Sans display headings.
   The homepage (index.html) is self-contained and does NOT use this file. */

:root{
  --bg:#fbf5f0;
  --ink-1:#1b1714; --ink-2:#5d554d; --ink-3:#938a80;
  --card:rgba(255,255,255,.66); --card-brd:rgba(28,22,18,.10);
  --sheet:rgba(255,255,255,.82);
  --accent:#ec6049; --accent-2:#ff5d8f; --accent-3:#9b7bff;
  --chip:rgba(255,255,255,.72); --chip-brd:rgba(28,22,18,.08);
  --nav:rgba(251,245,240,.72);
  /* legacy aliases — existing markup / inline styles reference these */
  --fg-1:#1b1714; --fg-2:#5d554d; --fg-3:#938a80;
  --coral:#ec6049; --coral-soft:rgba(236,96,73,.12);
  --border:rgba(28,22,18,.10); --bg-elev:rgba(255,255,255,.82);
  --max:780px;
  --font-display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f0b14;
    --ink-1:#f6f1ea; --ink-2:#c4bccf; --ink-3:#8a8198;
    --card:rgba(30,24,38,.6); --card-brd:rgba(255,255,255,.10);
    --sheet:rgba(22,18,30,.74);
    --accent:#ff7a63; --accent-2:#ff6fa3; --accent-3:#b39bff;
    --chip:rgba(40,32,52,.62); --chip-brd:rgba(255,255,255,.10);
    --nav:rgba(15,11,20,.72);
    --fg-1:#f6f1ea; --fg-2:#c4bccf; --fg-3:#8a8198;
    --coral:#ff7a63; --coral-soft:rgba(255,122,99,.14);
    --border:rgba(255,255,255,.10); --bg-elev:rgba(22,18,30,.74);
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip;}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink-1);
  font-family:var(--font-body); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ambient gradient field — same as the homepage */
.field{position:fixed; inset:0; z-index:-2; overflow:hidden;}
.glow{position:absolute; border-radius:50%; filter:blur(70px); will-change:transform;}
.glow.g1{width:48vw;height:48vw;left:-12vw;top:-16vw; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 65%); animation:breathe 16s ease-in-out infinite;}
.glow.g2{width:46vw;height:46vw;right:-14vw;top:-8vw; background:radial-gradient(circle at 60% 40%, var(--accent-2), transparent 64%); opacity:.85; animation:breathe 19s ease-in-out infinite reverse;}
.glow.g3{width:54vw;height:54vw;left:18vw;bottom:-28vw; background:radial-gradient(circle at 50% 50%, var(--accent-3), transparent 66%); opacity:.7; animation:breathe 22s ease-in-out infinite;}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@keyframes breathe{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(2%,3%) scale(1.08);}}

.wrap{max-width:var(--max); margin:0 auto; padding:0 22px;}

/* glass nav (fixed, matches homepage) */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--nav); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--card-brd);
}
header.site .wrap{max-width:1080px; display:flex; align-items:center; justify-content:space-between; gap:14px; height:60px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink-1);}
.brand:hover{text-decoration:none;}
.brand .mark{width:30px; height:30px; border-radius:9px; overflow:hidden; flex:none; box-shadow:0 6px 18px -6px rgba(236,96,73,.55);}
.brand .mark img{width:100%; height:100%; object-fit:cover; display:block;}
nav.site{display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end;}
nav.site a{color:var(--ink-2); font-size:14.5px; font-weight:600; margin:0; padding:7px 11px; border-radius:10px;}
nav.site a:hover{color:var(--ink-1); background:var(--chip); text-decoration:none;}

/* long-form document content — frosted glass sheet over the gradient */
main.doc{padding:96px 0 64px;}
main.doc .wrap{
  max-width:var(--max); background:var(--sheet); border:1px solid var(--card-brd); border-radius:24px;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 30px 70px -34px rgba(8,3,10,.45);
  padding:42px clamp(22px,4vw,54px) 50px;
}
main.doc h1{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4.2vw,40px); letter-spacing:-.025em; line-height:1.08; margin:0 0 6px;}
main.doc .sub{color:var(--ink-3); font-size:15px; margin:0 0 30px;}
main.doc h2{font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.6vw,25px); letter-spacing:-.015em; line-height:1.2; margin:40px 0 10px;}
main.doc h3{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-.01em; margin:26px 0 6px;}
main.doc p, main.doc li{color:var(--ink-2);}
main.doc strong{color:var(--ink-1); font-weight:650;}
main.doc ul, main.doc ol{padding-left:22px;}
main.doc li{margin:6px 0;}
main.doc a{font-weight:600;}

.callout{background:var(--chip); border:1px solid var(--chip-brd); border-left:3px solid var(--accent); border-radius:14px; padding:14px 18px; margin:20px 0;}
.callout p{margin:0; color:var(--ink-1);}

table.subproc{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px;}
table.subproc th, table.subproc td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--card-brd); vertical-align:top;}
table.subproc th{color:var(--ink-1); font-weight:600;}
table.subproc td{color:var(--ink-2);}

footer.site{margin-top:10px; border-top:1px solid var(--card-brd); background:var(--nav); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:26px 0;}
footer.site .wrap{max-width:1080px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; color:var(--ink-3); font-size:14px;}
footer.site a{color:var(--ink-2);}
footer.site a:hover{color:var(--ink-1);}

@media (max-width:560px){
  body{font-size:16px;}
  /* let the 4-link nav drop to its own full-width row instead of overflowing the bar */
  header.site .wrap{height:auto; min-height:56px; flex-wrap:wrap; align-items:center; padding-top:8px; padding-bottom:8px; row-gap:2px;}
  nav.site{flex:1 1 100%; gap:2px; justify-content:flex-end;}
  nav.site a{padding:6px 10px; font-size:14px;}
  main.doc{padding:112px 0 52px;}
  main.doc .wrap{border-radius:18px; padding:28px 20px 36px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  html{scroll-behavior:auto;}
}