/* ---------------------------------------------------------------------------
   Pantry legal site — shared styles.
   Tokens mirror theme.ts (Cartwise palette). If the app's palette changes,
   change these with it. Fonts are self-hosted on purpose: a privacy policy
   should not phone a third-party CDN to render itself.
   --------------------------------------------------------------------------- */

@font-face{font-family:Jakarta;src:url('/fonts/jakarta-500Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Jakarta;src:url('/fonts/jakarta-700Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Jakarta;src:url('/fonts/jakarta-800ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --bg:#FAF9F4; --surface:#ffffff; --surface2:#F1F0E8;
  --text:#1E2420; --text2:#7C8377; --text3:#9AA093;
  --accent:#2F8F5B; --accentDeep:#226B44; --accentBg:#E9F3EC; --accentBorder:#CFE6D6;
  --border:#EFEEE7; --link:#226B44;
  --r-chip:11px; --r-card:18px; --r-sheet:22px; --r-hero:26px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#151713; --surface:#1F221C; --surface2:#2A2E26;
    --text:#F2F1EA; --text2:rgba(242,241,234,.66); --text3:rgba(242,241,234,.48);
    --accent:#4FB07C; --accentDeep:#4FB07C; --accentBg:rgba(79,176,124,.12); --accentBorder:rgba(79,176,124,.28);
    --border:rgba(242,241,234,.09); --link:#4FB07C;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:Jakarta,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:500; font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast{border-bottom:1px solid var(--border);background:var(--bg)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:30px;height:30px;border-radius:8px;display:block}
.brand b{font-weight:800;font-size:20px;letter-spacing:-.5px}
.nav{display:flex;gap:22px}
.nav a{color:var(--text2);text-decoration:none;font-weight:700;font-size:14.5px}
.nav a:hover{color:var(--text)}
.nav a[aria-current]{color:var(--accentDeep)}

/* ── page head ────────────────────────────────────────────────────────── */
main{padding:56px 0 28px}
h1{font-weight:800;font-size:44px;line-height:1.1;letter-spacing:-1.4px;margin-bottom:14px}
.date{color:var(--text2);font-size:14.5px;font-weight:500}
.date b{color:var(--text);font-weight:700}
.lead{font-size:19px;line-height:1.6;color:var(--text2);margin-top:18px}

/* ── position panel (the "short version") ─────────────────────────────── */
.panel{
  background:var(--accentBg); border:1px solid var(--accentBorder);
  border-radius:var(--r-hero); padding:26px 28px; margin:34px 0 8px;
}
.panel .eyebrow{color:var(--accentDeep);opacity:.75}
.panel p{color:var(--accentDeep);font-size:19px;line-height:1.55;font-weight:700;letter-spacing:-.3px;margin-top:8px}
.panel ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.panel li{
  background:var(--surface); border:1px solid var(--accentBorder); border-radius:var(--r-chip);
  padding:6px 13px; font-size:13.5px; font-weight:700; color:var(--accentDeep); line-height:1.4;
}
@media (prefers-color-scheme:dark){ .panel li{background:transparent} }

.eyebrow{
  font-weight:700; font-size:11.5px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--text3);
}

/* ── table of contents ────────────────────────────────────────────────── */
.toc{margin:44px 0 8px;border-top:1px solid var(--border);padding-top:22px}
.toc ol{list-style:none;counter-reset:s;margin-top:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.toc li{counter-increment:s}
.toc a{
  display:flex;gap:12px;align-items:baseline;text-decoration:none;color:var(--text);
  font-weight:700;font-size:15.5px;padding:8px 0;border-radius:8px;
}
.toc a::before{
  content:counter(s); color:var(--text3); font-weight:700; font-size:13px;
  font-variant-numeric:tabular-nums; min-width:15px;
}
.toc a:hover{color:var(--accentDeep)}
@media (max-width:620px){ .toc ol{grid-template-columns:1fr} }

/* ── body sections ────────────────────────────────────────────────────── */
section{margin-top:52px;scroll-margin-top:24px}
h2{
  font-weight:800; font-size:25px; letter-spacing:-.7px; line-height:1.25;
  display:flex; gap:14px; align-items:baseline;
}
h2::before{
  content:attr(data-n); color:var(--accent); font-size:14px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
h3{font-weight:800;font-size:17.5px;letter-spacing:-.3px;margin:28px 0 6px}
section > p, section > ul{margin-top:12px}
p a, li a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}
p a:hover, li a:hover{text-decoration-thickness:2.5px}
strong{font-weight:800;color:var(--text)}
ul{padding-left:22px}
li{margin:5px 0}
li::marker{color:var(--text3)}

/* ── q&a (support) ────────────────────────────────────────────────────── */
.qa{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden;margin-top:16px}
.qa details{border-top:1px solid var(--border)}
.qa details:first-child{border-top:0}
.qa summary{
  cursor:pointer; list-style:none; padding:19px 22px; font-weight:800; font-size:16.5px;
  letter-spacing:-.2px; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:''; width:9px; height:9px; flex:none; border-right:2.5px solid var(--text3);
  border-bottom:2.5px solid var(--text3); transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.qa details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.qa summary:hover{color:var(--accentDeep)}
.qa .a{padding:0 22px 20px;color:var(--text2);font-size:15.5px;line-height:1.65}
.qa .a p + p{margin-top:10px}

/* ── contact card ─────────────────────────────────────────────────────── */
.contact{
  margin-top:22px; border:1px solid var(--border); background:var(--surface);
  border-radius:var(--r-hero); padding:26px 28px;
}
.contact .em{font-weight:800;font-size:22px;letter-spacing:-.5px;margin-top:4px;display:inline-block}
.contact .em a{color:var(--link);text-decoration:none}
.contact .em a:hover{text-decoration:underline}
.contact .note{color:var(--text2);font-size:14.5px;margin-top:8px}

/* ── index rows ───────────────────────────────────────────────────────── */
.rows{margin-top:28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.rows a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;text-decoration:none;color:var(--text);border-top:1px solid var(--border);
}
.rows a:first-child{border-top:0}
.rows a:hover{background:var(--surface2)}
.rows .t{display:block;font-weight:800;font-size:16.5px;letter-spacing:-.2px}
.rows .s{display:block;color:var(--text2);font-size:14px;font-weight:500;margin-top:3px}
.rows .ch{width:8px;height:8px;flex:none;border-right:2.5px solid var(--text3);border-bottom:2.5px solid var(--text3);transform:rotate(-45deg)}

/* ── footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);margin-top:76px;padding:28px 0 60px;color:var(--text3);font-size:13.5px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--text2);text-decoration:none;font-weight:700}
footer a:hover{color:var(--text)}
footer .fine{max-width:420px;line-height:1.55}

@media (max-width:620px){
  body{font-size:16.5px}
  h1{font-size:34px;letter-spacing:-1px}
  h2{font-size:22px}
  main{padding:40px 0 20px}
  .wrap{padding:0 20px}
  .mast .wrap{height:64px}
  .panel,.contact{padding:22px 20px}
  .panel p{font-size:17.5px}
  .contact .em{font-size:18px;letter-spacing:-.3px}
  .qa summary{padding:17px 18px;font-size:15.5px}
  .qa .a{padding:0 18px 18px}
  footer .wrap{flex-direction:column;gap:12px}
}