/* SellyPOS — long-form document pages (/privacy, /terms).
   Same tokens as index.html; only the prose furniture is new. */

:root{
  color-scheme: dark light;

  /* SellyPOS — dark (canonical) */
  --bg:#0C0F14;
  --surface:#12171F;
  --surface-2:#171E27;
  --line:rgba(234,240,247,.10);
  --line-strong:rgba(234,240,247,.18);
  --ink:#EAF0F7;
  --muted:#8A98A8;

  --brand:#00C08B;
  --brand-hover:#2DD4A7;
  --brand-pressed:#00A075;
  --on-brand:#04150F;
  --brand-text:#00C08B;
  --brand-tint:#0F2E2C;

  /* the one addition: a caution accent for the clauses that carry consequences */
  --warn:#F0B24A;
  --warn-tint:rgba(240,178,74,.09);
  --warn-line:rgba(240,178,74,.34);

  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#F7F9FA;
    --surface:#FFFFFF;
    --surface-2:#FBFCFD;
    --line:rgba(12,15,20,.12);
    --line-strong:rgba(12,15,20,.20);
    --ink:#0C0F14;
    --muted:#5A6672;

    --brand:#009A70;
    --brand-hover:#00926B;
    --brand-pressed:#008E68;
    --on-brand:#04150F;
    --brand-text:#00674A;
    --brand-tint:#DBF1EB;

    --warn:#8A5A00;
    --warn-tint:rgba(138,90,0,.07);
    --warn-line:rgba(138,90,0,.30);
  }
}

*{box-sizing:border-box;}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:2.5rem 1.5rem 0;
}

.wrap{max-width:72rem; margin:0 auto;}

/* ---------- masthead ---------- */
.masthead{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  padding-bottom:2.25rem;
  border-bottom:1px solid var(--line);
}
.logo{display:block; width:148px; height:auto;}
.nav{display:flex; gap:1.5rem; font-size:.875rem;}
.nav a{color:var(--muted); text-decoration:none;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--brand-text);}

/* ---------- document head ---------- */
.doc-head{padding:3rem 0 2.5rem; border-bottom:1px solid var(--line);}
h1{
  font-size:clamp(2rem, 5.5vw, 3rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 1.1rem;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 2.25rem;
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--muted);
  margin:0;
}
.meta b{color:var(--ink); font-weight:500;}
.applies{color:var(--muted); max-width:56ch; margin:1.4rem 0 0; font-size:.9375rem;}
.applies strong{color:var(--ink); font-weight:600;}

/* ---------- layout ---------- */
/* minmax(0,1fr) on every track: without it a wide table stretches the grid
   past the viewport instead of scrolling inside its own .table-wrap */
.doc{display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; padding:2.5rem 0 1rem;}
@media (min-width:64rem){
  .doc{grid-template-columns:14rem minmax(0,1fr); gap:4rem;}
}

.toc{font-size:.875rem; min-width:0;}
@media (min-width:64rem){
  .toc{position:sticky; top:2rem; align-self:start; max-height:calc(100vh - 4rem); overflow:auto;}
}
.toc h2{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  margin:0 0 .9rem;
}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:.4rem;}
.toc a{color:var(--muted); text-decoration:none; display:flex; gap:.65rem; line-height:1.4;}
.toc a:hover{color:var(--ink);}
.toc .n{font-family:var(--mono); font-size:.75rem; color:var(--brand-text); flex:none; min-width:1.15rem;}

/* ---------- prose ---------- */
.prose{max-width:46rem; min-width:0;}
.prose h2{
  font-size:1.375rem;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.25;
  margin:3rem 0 1rem;
  scroll-margin-top:2rem;
  display:flex;
  gap:.75rem;
  align-items:baseline;
  flex-wrap:wrap;
}
.prose section:first-of-type h2{margin-top:0;}
.prose h2 .n{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:500;
  color:var(--brand-text);
  flex:none;
}
.prose h3{
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.01em;
  margin:2rem 0 .7rem;
  scroll-margin-top:2rem;
}
.prose h3 .n{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:500;
  color:var(--muted);
  margin-right:.55rem;
}
.prose p{margin:0 0 1rem; color:var(--muted);}
.prose strong{color:var(--ink); font-weight:600;}
.prose ul{margin:0 0 1.15rem; padding-left:1.15rem; color:var(--muted);}
.prose li{margin-bottom:.5rem;}
.prose li::marker{color:var(--brand-text);}
.prose code{
  font-family:var(--mono);
  font-size:.875em;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.05em .35em;
}
.prose a{color:var(--brand-text); text-decoration:none; border-bottom:1px solid var(--line-strong);}
.prose a:hover{border-color:var(--brand);}

/* ---------- tables ---------- */
.table-wrap{
  overflow-x:auto;
  margin:0 0 1.25rem;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface);
}
table{border-collapse:collapse; width:100%; font-size:.9375rem; min-width:30rem;}
th{
  text-align:left;
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:.7rem 1rem;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
  white-space:nowrap;
}
td{padding:.8rem 1rem; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top;}
tbody tr:last-child td{border-bottom:0;}
td:first-child{color:var(--ink);}
td strong{color:var(--ink);}

/* ---------- callouts ---------- */
.callout{
  display:flex;
  gap:.9rem;
  padding:1rem 1.1rem;
  margin:0 0 1.25rem;
  border-radius:10px;
  background:var(--warn-tint);
  border:1px solid var(--warn-line);
}
.callout .ico{flex:none; color:var(--warn); margin-top:.25rem;}
.callout p{margin:0 0 .6rem; color:var(--ink);}
.callout p:last-child{margin-bottom:0;}
.callout ul{margin:0; color:var(--ink);}
.callout li::marker{color:var(--warn);}

.keypoint{
  background:var(--brand-tint);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.25rem 1.35rem;
  margin:0 0 1.25rem;
}
.keypoint p{color:var(--ink);}
.keypoint p:last-child{margin-bottom:0;}

.flag{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--warn);
  border:1px solid var(--warn-line);
  background:var(--warn-tint);
  padding:.1rem .5rem .15rem;
  border-radius:999px;
  white-space:nowrap;
  align-self:center;
}

/* ---------- contact card ---------- */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  padding:1.4rem 1.5rem;
  margin:0 0 1.25rem;
}
.card .who{font-weight:700; color:var(--ink); margin:0 0 .3rem;}
.card .addr{margin:0 0 1.1rem; color:var(--muted); font-size:.9375rem;}
.card dl{display:grid; gap:.5rem 1.25rem; margin:0; font-size:.9375rem;}
@media (min-width:34rem){
  .card dl{grid-template-columns:auto 1fr; align-items:baseline;}
}
.card dt{
  font-family:var(--mono);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.card dd{margin:0; color:var(--ink);}
.card dd a{color:var(--brand-text); text-decoration:none; border-bottom:1px solid var(--line-strong);}
.card dd a:hover{border-color:var(--brand);}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  margin-top:3rem;
  padding:1.75rem 0 2.5rem;
  color:var(--muted);
  font-size:.8125rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  justify-content:space-between;
  align-items:center;
}
footer .links{display:flex; flex-wrap:wrap; gap:1.25rem;}
footer a{color:var(--muted); text-decoration:none;}
footer a:hover{color:var(--ink);}

.endrule{height:4px; background:var(--brand);}

a:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;}