/* ─────────────────────────────────────────────────────────────
   UniDash — shared styles for the document pages
   (support, privacy, terms, account deletion).
   Tokens mirror src/constants/theme.ts so the site and the app
   read as one product.
   ───────────────────────────────────────────────────────────── */

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

:root{
  --paper:#E5D6C3;
  --paper-deep:#DBC9B4;
  --cream:#F8EFE2;
  --cream-hi:#FAF3E8;

  --ink:#33240F;
  --ink-2:#6E5A45;
  --ink-3:#A08B73;

  --line:#CDBBA3;
  --line-strong:#BBA587;

  --brand:#EF5B25;
  --brand-deep:#D8431A;
  --brand-lift:#FF7A3D;
  --brand-wash:rgba(239,91,37,.10);

  --warn:#B07D00;
  --warn-wash:rgba(245,158,11,.13);

  --shadow-s:0 2px 6px rgba(51,36,15,.07);
  --shadow-m:0 10px 28px rgba(51,36,15,.11);
  --grain-opacity:.5;

  --sans:'Quicksand',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hand:'Caveat','Bradley Hand',cursive;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#1C1812;
    --paper-deep:#272219;
    --cream:#2E2820;
    --cream-hi:#393021;
    --ink:#F4EEE4;
    --ink-2:#B6A893;
    --ink-3:#827363;
    --line:#3A3328;
    --line-strong:#4F4636;
    --brand:#FF6A36;
    --brand-deep:#FF8A4D;
    --brand-lift:#FF8A4D;
    --brand-wash:rgba(255,106,54,.14);
    --warn:#FBBF24;
    --warn-wash:rgba(251,191,36,.14);
    --shadow-s:0 2px 6px rgba(0,0,0,.35);
    --shadow-m:0 10px 28px rgba(0,0,0,.45);
    --grain-opacity:.28;
  }
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  font-weight:500;
  line-height:1.68;
  background:var(--paper);
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
}
/* paper grain, same as the home page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen}}

img,svg{display:block;max-width:100%}
a{color:var(--brand-deep);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
::selection{background:var(--brand);color:#fff}

/* ── site nav ────────────────────────────────────────────── */
.sitenav{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.sitenav-in{
  max-width:1160px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:18px;
}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.mark:hover{text-decoration:none}
.mark-badge{
  width:36px;height:36px;border-radius:11px;flex:none;
  background:linear-gradient(160deg,var(--brand-lift),var(--brand-deep));
  display:grid;place-items:center;box-shadow:var(--shadow-s);
}
.mark-badge svg{width:25px;height:25px}
.wordmark{
  font-family:var(--mono);font-weight:700;font-size:1.02rem;
  letter-spacing:.03em;color:var(--ink);
}
.wordmark span{color:var(--brand)}
.sitenav-links{display:flex;gap:22px;margin-left:auto;align-items:center}
.sitenav-links a{color:var(--ink-2);font-weight:600;font-size:.9rem}
.sitenav-links a:hover{color:var(--brand);text-decoration:none}
.nav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:.88rem;
  padding:10px 18px;border-radius:12px;box-shadow:0 5px 0 var(--brand-deep);
  transition:transform .16s ease,box-shadow .16s ease;
}
.nav-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--brand-deep);text-decoration:none}
@media (max-width:640px){.sitenav-links a:not(.nav-btn){display:none}}

/* ── document shell ──────────────────────────────────────── */
.container{
  max-width:820px;margin:0 auto;
  padding:clamp(38px,6vw,64px) 24px clamp(48px,7vw,80px);
  position:relative;z-index:1;
}

.header{
  text-align:center;margin-bottom:44px;padding-bottom:34px;
  border-bottom:1px solid var(--line);position:relative;
}
.header .logo{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--brand);
  margin-bottom:16px;
}
.header h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px;
}
/* Sans, not mono: these read as full sentences on some pages, and tracked
   monospace makes a sentence hard to scan. */
.last-updated{
  font-family:var(--sans);font-size:.88rem;font-weight:600;
  color:var(--ink-3);font-style:normal;
}

/* ── document typography ─────────────────────────────────── */
h2{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.4rem,2.6vw,1.75rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--ink);margin:46px 0 16px;
  padding-top:22px;border-top:1px solid var(--line);
}
.header + h2,h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
h3{
  font-family:var(--sans);font-weight:700;font-size:1.08rem;
  color:var(--brand);margin:30px 0 12px;
}
p{margin-bottom:16px;color:var(--ink-2)}
strong{color:var(--ink);font-weight:700}
ul,ol{margin:0 0 18px;padding-left:24px;color:var(--ink-2)}
li{margin-bottom:9px}
li::marker{color:var(--brand)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ── callouts ────────────────────────────────────────────── */
.highlight,.important-box{
  padding:20px 22px;margin:26px 0;border-radius:16px;
  border:1px solid var(--line);border-left:4px solid var(--brand);
  background:var(--cream);
}
.highlight p:last-child,.important-box p:last-child{margin-bottom:0}
.important-box{border-left-color:var(--warn);background:var(--warn-wash)}

.contact-info{
  background:var(--cream);border:1px solid var(--line);
  border-radius:20px;padding:28px 26px;margin-top:40px;box-shadow:var(--shadow-s);
}
.contact-info h2{margin-top:0;border-top:0;padding-top:0}
.contact-info ul{list-style:none;padding-left:0;margin-bottom:0}
.contact-info li{
  padding:10px 0;border-bottom:1px solid var(--line);
  color:var(--ink-2);margin-bottom:0;
}
.contact-info li:last-child{border-bottom:0}

.cta-button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:.98rem;
  padding:14px 28px;border-radius:14px;margin:18px 0;
  box-shadow:0 6px 0 var(--brand-deep);
  transition:transform .16s ease,box-shadow .16s ease;
}
.cta-button:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--brand-deep);text-decoration:none}
.cta-button:active{transform:translateY(6px);box-shadow:0 0 0 var(--brand-deep)}

/* ── FAQ accordions ──────────────────────────────────────── */
.faq{
  border:1px solid var(--line);border-radius:16px;
  margin:12px 0;overflow:hidden;background:var(--cream);
}
.faq summary{
  cursor:pointer;padding:17px 52px 17px 20px;position:relative;list-style:none;
  font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:11px;height:11px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq summary:hover{background:var(--cream-hi);color:var(--brand)}
.faq .answer{padding:0 20px 18px;color:var(--ink-2);font-size:.96rem}

/* ── footer ──────────────────────────────────────────────── */
.footer{
  text-align:center;margin-top:56px;padding-top:30px;
  border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.86rem;font-weight:600;
}
.footer p{color:var(--ink-3);margin-bottom:8px}
.footer a{color:var(--ink-2)}
.footer a:hover{color:var(--brand)}
.footer .hand{
  font-family:var(--hand);font-size:1.28rem;color:var(--brand);
  display:inline-block;transform:rotate(-1.5deg);margin-top:6px;
}

@media (max-width:768px){
  .container{padding-left:20px;padding-right:20px}
  h2{margin-top:36px}
}