/* ============ POLICY PAGES ============
   Security, AI use, privacy, terms, accessibility. These were text-only: one
   column of h2/p, no hero on three of them, an empty .sky so nothing moved.
   policy.js wraps each h2 + its paragraphs into an <article class="clause">
   and builds the sticky index; this file gives them a shape that belongs to
   the rest of the site. Tokens only. */

/* ---- two columns: sticky index left, clauses right ---- */
.legal{max-width:none;display:grid;grid-template-columns:minmax(0,220px) minmax(0,760px);gap:clamp(28px,5vw,80px);align-items:start}
.legal>.clause-index{position:sticky;top:96px;align-self:start}
.legal>.clause,.legal>.pull,.legal>.switchboard,.legal>h2,.legal>p,.legal>ul{grid-column:2}
@media (max-width:900px){
  .legal{grid-template-columns:1fr}
  .legal>.clause-index{position:static;margin-bottom:8px}
  .legal>.clause,.legal>.pull,.legal>.switchboard,.legal>h2,.legal>p,.legal>ul{grid-column:1}
}

/* ---- the index ---- */
.clause-index{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-strong)}
.clause-index a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-45);transition:color .2s,border-color .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.clause-index a:hover{color:var(--ink);transform:translateX(3px)}
.clause-index a.on{color:var(--ink);border-left-color:var(--ember)}
.clause-index a:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:4px}

/* ---- a clause: label, hairline, then the text ---- */
.clause{position:relative;padding:28px 0 6px;border-top:1px solid var(--line)}
.clause:first-of-type{border-top:0;padding-top:0}
.clause .clause-n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember-ink);margin-bottom:8px}
.legal .clause h2{margin-top:0;font-size:clamp(22px,2.3vw,30px);line-height:1.12}
.legal .clause p{margin-top:12px;font-size:15.5px;font-weight:400;line-height:1.72;color:var(--ink-70);max-width:64ch}
.legal .clause ul{margin:12px 0 0;padding-left:18px}
.legal .clause li{font-size:15px;font-weight:400;line-height:1.65;color:var(--ink-70);margin:6px 0}
.legal .clause li b{font-weight:500;color:var(--ink)}
.clause:target{scroll-margin-top:110px}

/* reveal: the whole clause rises, then its own paragraphs settle in behind it */
.clause[data-reveal] .clause-n,.clause[data-reveal] h2,.clause[data-reveal] p,.clause[data-reveal] ul{
  opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.clause[data-reveal].in .clause-n{opacity:1;transform:none;transition-delay:.02s}
.clause[data-reveal].in h2{opacity:1;transform:none;transition-delay:.08s}
.clause[data-reveal].in p,.clause[data-reveal].in ul{opacity:1;transform:none;transition-delay:.18s}

/* ---- the pull: the one sentence that matters, on the band ---- */
.pull{margin:34px 0 10px;padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px);border-radius:20px;
  background:var(--navy);color:var(--bone);position:relative;overflow:hidden;box-shadow:var(--shadow-float)}
.pull::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 85% 10%,rgba(196,116,43,.22),transparent 60%),
             radial-gradient(ellipse 50% 60% at 5% 95%,rgba(42,69,216,.18),transparent 60%)}
.pull p{position:relative;margin:0;color:var(--bone);font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,34px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance;max-width:22ch}
.pull small{position:relative;display:block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,237,227,.6)}
.pull[data-reveal]{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.pull[data-reveal].in{opacity:1;transform:none}

/* ---- AI use: the approval boundary as a switchboard ---- */
.switchboard{margin:26px 0 8px;padding:clamp(18px,3vw,28px);border:1px solid var(--line-strong);border-radius:20px;background:var(--white);box-shadow:var(--shadow-float)}
.sb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 18px;margin-bottom:14px}
.sb-head p{margin:0;font-size:14px;color:var(--ink-70);max-width:52ch}
.sb-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
.sb-count b{font-family:var(--display);font-size:22px;letter-spacing:-.02em;color:var(--ink);margin:0 4px 0 6px;font-variant-numeric:tabular-nums}
.sb-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.sb-cols{grid-template-columns:1fr}}
.sb-col{border:1px solid var(--line);border-radius:14px;padding:12px;min-height:120px;background:var(--paper);transition:border-color .3s}
.sb-col h3{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);display:flex;align-items:center;gap:8px}
.sb-col h3 i{width:7px;height:7px;border-radius:50%;background:var(--cobalt);display:inline-block}
.sb-col.held h3 i{background:var(--ember)}
.sb-col.drop{border-color:var(--cobalt)}
.sb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:9px 10px 9px 12px;margin:0 0 6px;cursor:pointer;
  font-family:var(--body);font-size:14px;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.sb-row:hover{border-color:var(--ink-45);transform:translateX(2px)}
.sb-row:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.sb-row span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
.sb-row.moving{transform:translateX(14px);opacity:.4}
.sb-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.sb-foot .btn-sm{padding:.42rem .85rem;font-size:.78rem}
.sb-note{font-size:12.5px;color:var(--ink-45);margin:0}

/* ---- legal pages that had no hero: same .phero as everywhere else ---- */
.phero-legal .phero-foot span:last-child{opacity:.8}

@media (prefers-reduced-motion:reduce){
  .clause[data-reveal] *,.pull[data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .sb-row,.clause-index a{transition:none}
}
@media print{.clause-index{display:none}.legal{display:block}.pull{background:none;color:var(--print-ink);box-shadow:none;padding:0;border-top:1pt solid var(--print-rule-strong)}.switchboard{display:none}}