/* ==========================================================================
   LEGAL PAGES
   Quiet documents in the brand's own voice: the same cream, the same type, the
   same nav — but no decoration, because nobody reads a privacy policy for the
   rainbows. Loaded alongside site.css so the tokens and the nav come for free.
   ========================================================================== */
.legal-main{padding:calc(var(--nav-h, 76px) + 3rem) 0 5rem;position:relative;z-index:2}
.legal-wrap{width:min(58rem, 100% - 2.6rem);margin-inline:auto}

.legal-head{margin-bottom:2.6rem}
.legal-head .eyebrow{margin-bottom:1rem}
.legal-head h1{font-family:var(--display);font-weight:600;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.025em;
  color:var(--ink);margin:0}
.legal-updated{margin-top:1rem;color:var(--ink-soft);font-size:.94rem}

.legal-body{background:#fff;border-radius:var(--r-card-lg, 28px);
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:var(--shadow-soft, 0 10px 30px rgba(51,40,74,.08))}
.legal-body h2{font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--ink);
  margin:2.2rem 0 .7rem;letter-spacing:-.01em}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--display);font-weight:600;font-size:1.02rem;
  color:var(--ink);margin:1.5rem 0 .4rem}
.legal-body p{margin:0 0 1rem;line-height:1.68;color:#4A4166}
.legal-body ul{margin:0 0 1.2rem;padding-left:1.3rem;line-height:1.68;color:#4A4166}
.legal-body li{margin-bottom:.38rem}
.legal-body a{color:var(--pink-ink);text-decoration:underline;text-underline-offset:2px}

/* a labelled fact, e.g. "VAT Number: [VAT NUMBER]" */
.legal-body dl{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:.5rem 1.4rem;
  margin:0 0 1.4rem}
.legal-body dt{font-weight:700;color:var(--ink)}
.legal-body dd{margin:0;color:#4A4166}
@media (max-width:640px){
  .legal-body dl{grid-template-columns:1fr;gap:.1rem 0}
  .legal-body dd{margin-bottom:.7rem}
}

/* Anything still waiting on the client is loud on purpose. A placeholder that
   blends in is a placeholder that ships. */
.ph{display:inline-block;background:#FFE8B3;color:#6B4A00;
  border:1px dashed #C08A00;border-radius:6px;
  padding:.1em .5em;font-family:var(--mono, ui-monospace, monospace);
  font-size:.86em;font-weight:600;letter-spacing:.02em}

/* the cookie table */
.legal-table-wrap{overflow-x:auto;margin:0 0 1.4rem}
.legal-table{border-collapse:collapse;width:100%;min-width:38rem;font-size:.92rem}
.legal-table th,.legal-table td{text-align:left;padding:.7rem .8rem;
  border-bottom:1px solid rgba(51,40,74,.12);vertical-align:top;color:#4A4166}
.legal-table th{font-family:var(--display);font-weight:600;color:var(--ink);
  background:var(--cream-deep, #FBEFDE)}
.legal-table tr:last-child td{border-bottom:0}

.legal-back{display:inline-flex;align-items:center;gap:.5rem;margin-top:2.2rem;
  font-family:var(--display);font-weight:600;color:var(--pink-ink);
  text-decoration:none}
.legal-back:hover{text-decoration:underline}

/* the footer's own legal row */
.foot-legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.16)}
.foot-legal-links a{font-size:.86rem;opacity:.78;text-decoration:none}
.foot-legal-links a:hover{opacity:1;text-decoration:underline}