/* ============================================================
   POLICY — shared layout for /privacy, /terms, /security
   sticky TOC · numbered sections · callouts · tables
   ============================================================ */

.policy{
  display:grid;grid-template-columns:280px 1fr;
  border-bottom:1px solid var(--rule);
}
.policy-toc{
  padding:80px 52px;
  border-right:1px solid var(--rule);
  position:sticky;top:92px;align-self:start;
  max-height:calc(100vh - 92px);overflow-y:auto;
}
.policy-toc h4{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--text-dim);
  margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.policy-toc ol{list-style:none;display:flex;flex-direction:column;gap:14px;counter-reset:toc}
.policy-toc ol li{counter-increment:toc;display:flex;gap:10px;align-items:baseline}
.policy-toc ol li::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--mono);font-size:10px;color:var(--text-dim);min-width:24px;
}
.policy-toc ol li a{
  font-size:13px;color:var(--text-mid);transition:color 0.2s;line-height:1.5;
}
.policy-toc ol li a:hover{color:var(--text)}
.policy-body{padding:80px 64px;max-width:880px}
.policy-intro{
  font-size:17px;color:var(--text-mid);line-height:1.85;
  padding-bottom:32px;border-bottom:1px solid var(--rule);margin-bottom:48px;
}
.policy-section{
  padding:32px 0;border-bottom:1px solid var(--rule);
  scroll-margin-top:120px;
}
.policy-section:last-child{border-bottom:none}
.policy-section-num{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.policy-section-num::before{content:'';width:18px;height:1px;background:var(--accent)}
.policy-section h2{
  font-family:var(--sans);font-size:clamp(24px,2.4vw,32px);font-weight:700;
  line-height:1.15;letter-spacing:-0.01em;margin-bottom:20px;
}
.policy-section h3{
  font-family:var(--sans);font-size:16px;font-weight:600;
  margin:28px 0 10px;letter-spacing:-0.005em;
}
.policy-section p{
  font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:14px;
}
.policy-section ul{list-style:none;margin:14px 0 18px}
.policy-section ul li{
  position:relative;padding-left:20px;font-size:15px;
  color:var(--text-mid);line-height:1.85;margin-bottom:8px;
}
.policy-section ul li::before{
  content:'';position:absolute;left:0;top:13px;
  width:8px;height:1px;background:var(--accent);
}
.policy-section a{
  color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule);transition:text-decoration-color 0.2s;
}
.policy-section a:hover{text-decoration-color:var(--accent)}
.policy-section strong{color:var(--text);font-weight:600}

/* Callout box (used by all policy pages) */
.policy-callout{
  margin:20px 0;padding:20px 24px;
  background:rgba(58,170,210,0.06);
  border-left:2px solid var(--accent);
  font-size:14px;color:var(--text-mid);line-height:1.75;
}
.policy-callout code{
  font-family:var(--mono);font-size:12px;
  background:rgba(255,255,255,0.06);padding:1px 6px;border-radius:2px;
  color:var(--text);
}

/* Table (privacy only currently) */
.policy-table{
  width:100%;border-collapse:collapse;margin:16px 0;
  font-size:14px;
}
.policy-table th,.policy-table td{
  text-align:left;padding:14px 16px;border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.policy-table th{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-dim);font-weight:500;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
.policy-table td{color:var(--text-mid);line-height:1.7}

/* Inline emphasis chip (terms only currently) */
.policy-emphasis{
  font-family:var(--mono);font-size:13px;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--text);
  background:rgba(255,255,255,0.04);padding:2px 6px;border-radius:2px;
}

/* Pillars summary band (security only currently) */
.pillars{
  padding:64px 52px;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--rule);
}
.pillar{padding:28px 32px;border-right:1px solid var(--rule)}
.pillar:last-child{border-right:none}
.pillar-num{
  font-family:var(--mono);font-size:10px;letter-spacing:0.16em;
  color:var(--accent);margin-bottom:18px;
}
.pillar h4{
  font-size:18px;font-weight:700;margin-bottom:10px;letter-spacing:-0.01em;
}
.pillar p{font-size:13px;color:var(--text-dim);line-height:1.7}

/* Hero meta line (privacy/terms/security) */
.page-hero h1{margin-bottom:20px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .policy{grid-template-columns:1fr}
  .policy-toc{
    position:static;border-right:none;border-bottom:1px solid var(--rule);
    max-height:none;padding:48px 52px;
  }
  .policy-toc ol{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}
  .policy-body{padding:48px 52px}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(2n){border-right:none}
  .pillar:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media(max-width:768px){
  /* TOC becomes a tappable accordion */
  .policy-toc{
    padding:18px 24px;
    max-height:60px;
    overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
    cursor:pointer;
    position:relative;
    background:rgba(255,255,255,0.02);
  }
  .policy-toc::after{
    content:'';
    position:absolute;top:24px;right:24px;
    width:10px;height:10px;
    border-right:1.5px solid var(--text-mid);
    border-bottom:1.5px solid var(--text-mid);
    transform:rotate(45deg);
    transition:transform 0.3s ease;
  }
  .policy-toc.open{
    max-height:75vh;
    max-height:75dvh;
    overflow-y:auto;
    padding:24px 24px 32px;
    background:transparent;
    cursor:default;
  }
  .policy-toc.open::after{transform:rotate(-135deg);top:30px}
  .policy-toc h4{
    margin:0;padding:0;border-bottom:none;
    font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--text);
    cursor:pointer;user-select:none;
  }
  .policy-toc.open h4{
    margin-bottom:24px;padding-bottom:14px;
    border-bottom:1px solid var(--rule);
    color:var(--text-dim);
  }
  .policy-toc ol{grid-template-columns:1fr;gap:4px}
  .policy-toc ol li{padding:4px 0}
  .policy-toc ol li a{
    font-size:14px;padding:8px 0;
    display:inline-block;line-height:1.4;
  }

  /* Body */
  .policy-body{
    padding:32px 24px;
    max-width:none;
    min-width:0;
    overflow-wrap:break-word;
  }
  .policy-body *{min-width:0}
  .policy-section{position:relative}
  .policy-intro{
    font-size:15px;line-height:1.75;
    padding-bottom:24px;margin-bottom:32px;
  }
  .policy-section{padding:28px 0;scroll-margin-top:80px}
  .policy-section-num{margin-bottom:12px}
  .policy-section h2{
    font-size:22px;line-height:1.2;margin-bottom:14px;letter-spacing:-0.01em;
  }
  .policy-section h3{font-size:15px;margin:22px 0 8px}
  .policy-section p,.policy-section ul li{
    font-size:15px;line-height:1.7;
    overflow-wrap:break-word;word-break:break-word;
  }
  .policy-section ul{margin:12px 0 16px}
  .policy-section ul li{padding-left:18px;margin-bottom:6px}

  /* Callouts */
  .policy-callout{
    padding:16px 18px;font-size:14px;line-height:1.65;
    margin:18px 0;
    overflow-wrap:break-word;
  }
  .policy-callout a{word-break:break-all}

  /* Table → horizontal scroll inside a wrapper on mobile (privacy) */
  .policy-table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:14px 0;
    border:1px solid var(--rule);
    border-radius:2px;
  }
  .policy-table-wrap .policy-table{
    margin:0;font-size:13px;
    min-width:480px;
  }
  .policy-table-wrap .policy-table th,
  .policy-table-wrap .policy-table td{padding:10px 12px;white-space:normal}

  /* Pillars (security) */
  .pillars{grid-template-columns:1fr;padding:32px 24px;gap:0}
  .pillar{
    border-right:none;
    border-bottom:1px solid var(--rule);
    padding:24px 0;
  }
  .pillar:last-child{border-bottom:none}
  .pillar h4{font-size:17px}
  .pillar p{font-size:14px}
}
@media(max-width:480px){
  .policy-toc{padding:16px 20px;max-height:56px}
  .policy-toc::after{top:22px;right:20px;width:9px;height:9px}
  .policy-toc.open{padding:20px 20px 28px}
  .policy-toc.open::after{top:26px}
  .policy-body{padding:28px 20px}
  .policy-section{padding:24px 0}
  .policy-section h2{font-size:20px}
  .policy-section h3{font-size:14.5px}
  .policy-section p,.policy-section ul li{font-size:14.5px}
  .policy-intro{font-size:14.5px}
  .policy-callout{padding:14px 16px;font-size:13.5px}
  .pillars{padding:24px 20px}
  .page-hero h1{font-size:34px;line-height:1.1}
  .page-hero-meta{font-size:10px;line-height:1.6}
}