/* ── policy.css ──
   Shared shell for the standalone policy pages (shipping, returns, terms,
   privacy). Deliberately NOT a copy of index.html's stylesheet: these pages
   are read, not browsed, so they get a single narrow measure, no animation,
   no compositor work, and no dependency on the storefront's JS.

   The theme tokens are duplicated from index.html rather than imported. That
   is 20 lines of duplication in exchange for these pages having zero coupling
   to a 160KB file that changes constantly — and a policy page that breaks
   because someone refactored the shop grid is a worse outcome than a stale
   accent colour. */

:root{
  --ink:#15172B; --ink-2:#54586F; --paper:#F4F5F8; --card:#FFFFFF;
  --line:#E6E7EE; --accent:#5B3DF5; --instock:#1E9E6A; --gold:#B98A2E;
  --holo:linear-gradient(90deg,#6EE7F0 0%,#A78BFA 28%,#FF9EC4 54%,#FFE39A 76%,#6EE7F0 100%);
  --shadow:0 1px 2px rgba(21,23,43,.04),0 8px 24px rgba(21,23,43,.06);
  --hdr:rgba(244,245,248,.82);
}
html[data-theme="dark"]{
  --ink:#ECEDF4; --ink-2:#A0A4BC; --paper:#0E1020; --card:#171A2C;
  --line:#272B45; --hdr:rgba(14,16,32,.82);
  /* #5B3DF5 on this paper is 3.1:1, under the 4.5:1 text minimum, and it is
     the colour of every link in body copy. The brand lavender clears 7:1. */
  --accent:#A78BFA;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}

/* Keyboard focus: the browser default computes to a ~1px near-black outline,
   which is invisible on the dark theme. Same ring as the storefront. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
  box-shadow:0 0 0 5px rgba(255,255,255,.28)
}
html[data-theme="light"] a:focus-visible,html[data-theme="light"] button:focus-visible{
  box-shadow:0 0 0 5px rgba(21,23,43,.16)
}
html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}

/* ── header ─────────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:20;background:var(--hdr);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;gap:14px;padding:13px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
/* The inverted chip, matching the storefront's .chipmk and the favicon: a dark
   ground with the holo gradient INSIDE the glyph rather than behind it. These
   pages carried the old treatment (gradient behind a dark glyph) long after the
   storefront and the icons were inverted, so the same mark read two different
   ways depending on which page you landed on.

   The gradient must sit on the inner SPAN, not on .mark: background-clip:text
   consumes the element's own background, so a chip painting the gradient on
   itself could not also have a dark ground. */
.mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;
  background:#15172B;font-weight:800;font-size:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 2px 10px rgba(0,0,0,.28);
}
.mark>span{
  font-family:'Noto Sans JP','Bricolage Grotesque',sans-serif;font-weight:800;line-height:1;
  background:linear-gradient(135deg,#6EE7F0 0%,#7FB0FF 26%,#A78BFA 55%,#FF9EC4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* the wordmark is a <b class="bn">, not an <h1>: each page's own title is its only h1 */
.brand h1,.brand .bn{display:block;margin:0;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:19px;letter-spacing:-.02em;font-weight:800}
.brand small{display:block;color:var(--ink-2);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.hspace{flex:1}
.backlink{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  color:var(--ink);font-size:13.5px;font-weight:600;padding:8px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  transition:border-color .18s,transform .18s;
}
.backlink:hover{border-color:var(--accent);transform:translateX(-2px)}

.wrap{max-width:760px;margin:0 auto;padding:0 22px}

/* ── title block ────────────────────────────────────────────────────────── */
.phead{padding:52px 0 30px;border-bottom:1px solid var(--line);margin-bottom:38px}
.peyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.phead h1{
  margin:0 0 12px;font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(30px,6vw,44px);line-height:1.1;letter-spacing:-.03em;font-weight:800;
}
.phead p{margin:0;color:var(--ink-2);font-size:16px;max-width:56ch}
.updated{
  margin-top:18px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--ink-2);letter-spacing:.02em;
}

/* ── body copy ──────────────────────────────────────────────────────────── */
main{padding-bottom:60px}
h2{
  margin:44px 0 14px;font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:23px;letter-spacing:-.02em;font-weight:700;scroll-margin-top:80px;
}
h2:first-of-type{margin-top:0}
h3{margin:28px 0 10px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 15px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px}
li::marker{color:var(--accent)}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
strong,b{font-weight:650;color:var(--ink)}

/* wide content must scroll inside its own box, never the page */
.tablewrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px}
th,td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line)}
th{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);background:rgba(127,127,150,.05);
}
tbody tr:last-child td{border-bottom:0}
td.num{font-family:'JetBrains Mono',ui-monospace,monospace;white-space:nowrap}

/* callouts */
.note{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;
  background:var(--card);padding:16px 18px;margin:0 0 20px;box-shadow:var(--shadow);
}
.note.warn{border-left-color:var(--gold)}
.note.good{border-left-color:var(--instock)}
.note :last-child{margin-bottom:0}
.note b{display:block;margin-bottom:5px;font-size:14px}

.toc{
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:16px 20px;margin:0 0 38px;box-shadow:var(--shadow);
}
.toc b{
  display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px;font-weight:700;
}
.toc ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px}
.toc li{margin:0}
.toc a{font-size:14px;text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:30px 0 46px;color:var(--ink-2);font-size:13px}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--accent)}
.abn{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}

@media(max-width:560px){
  .phead{padding:34px 0 24px;margin-bottom:28px}
  .brand small{display:none}
  h2{font-size:20px;margin-top:34px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}