/* Legal / policy pages: long-form reading column. Narrower measure than the marketing pages
   and a heavier vertical rhythm, since these are read top-to-bottom rather than scanned. */
.legal-hero h1{max-width:26ch}
.legal-body .wrap{max-width:820px}
.legal-updated{font-size:13.5px;color:var(--muted);padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--line)}

.legal-body h2{font-size:clamp(21px,2.3vw,27px);margin-top:44px;margin-bottom:14px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body h3{font-size:17.5px;margin-top:26px;margin-bottom:10px}
.legal-body p{font-size:16.5px;line-height:1.8;color:var(--ink);margin-bottom:14px}
.legal-body a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:var(--teal-d)}

.legal-list{margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.legal-list li{position:relative;padding-inline-start:20px;font-size:16.5px;line-height:1.75}
.legal-list li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:6px;height:6px;border-radius:2px;background:var(--teal)}

.legal-body .callout{margin:22px 0}
.legal-note{font-size:14px;color:var(--muted)}

/* Visible marker for anything the owner/counsel must still fill in. Deliberately loud: it
   must be impossible to publish these pages without noticing the gaps. */
.legal-todo{
  display:inline-block;background:#fdeceb;color:#8f1d20;border:1px dashed #e2a3a4;
  border-radius:var(--radius-sm);padding:2px 9px;font-size:14px;font-weight:700;
}

.legal-table-wrap{overflow-x:auto;margin:18px 0 8px}
.legal-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.legal-table th,.legal-table td{border:1px solid var(--line);padding:12px 14px;text-align:right;vertical-align:top}
.legal-table th{background:var(--paper);font-weight:800}
.legal-table td{line-height:1.65;color:var(--muted)}

/* 404. No breadcrumbs bar precedes this hero (there is no page to be a breadcrumb of), so unlike
   every other inner page it must carry its own fixed-header clearance directly. */
.nf-hero{padding:calc(var(--hh) + 56px) 0 52px;text-align:center;position:relative;overflow:hidden}
.nf-hero .wrap{position:relative}
.nf-code{
  margin:0 0 6px;font-size:clamp(88px,16vw,168px);font-weight:800;line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--zoho-red) 0%,var(--zoho-yellow) 34%,var(--zoho-green) 67%,var(--zoho-blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf-hero h1{margin:0 0 12px}
.nf-hero .lede{max-width:52ch;margin-inline:auto;margin-bottom:30px}
.nf-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:480px){.nf-cta{flex-direction:column;align-items:stretch}}