/* ==========================================================================
   Bold Etik — Privacy & Cookies page
   Hero (layout in layout.css) · orange "in short" card · sticky contents + numbered sections.
   ========================================================================== */

.be-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 10px;
}

/* ---------- Hero ---------- */
.be-legal-hero {
  width: 100%;
  padding: 0 10px;
  --hero-script-w: 250px; --hero-script-h: 112px; --hero-script-x: 0px; --hero-script-y: 4px;
  --hero-desc-w-tablet: 220px; --hero-gap-phone: 13px;
}
.be-legal-hero .be-hero__title .t-hero { margin-right: 0; }
@media (max-width: 1199.98px) {
  .be-legal-hero { --hero-script-w: 175px; --hero-script-h: 64px; --hero-script-y: -4px; }
}
@media (max-width: 809.98px) {
  .be-legal-hero { padding: 0; }
  .be-legal-hero .be-hero__script { width: auto; height: auto; }
  .be-legal-hero .be-hero__script span { position: relative; left: auto; bottom: auto; }
}

/* ---------- Three short cards + contact ---------- */
.be-legal__body {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 1400px;
  padding: 120px 20px 150px;
}
.be-legal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.be-legal__section {
  display: flex; flex-direction: column; gap: 18px;
  padding: 40px;
  border-radius: 20px;
  background: var(--be-surface);
  font: 500 17px/1.6 var(--be-sans);
  color: var(--be-charcoal);
  transition: transform 0.65s var(--be-ease-elastic);
}
.be-legal__section:hover { transform: translateY(-6px) rotate(-1deg); }
.be-legal__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; color: var(--be-ink); }
.be-legal__section strong { color: var(--be-ink); font-weight: 600; }
.be-legal__section a:not(.be-button) {
  color: var(--be-ink); text-decoration: underline; text-decoration-color: var(--be-orange);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
}
.be-legal__section .be-button { align-self: flex-start; margin-top: auto; }

/* Hand-drawn circle around a number (same doodle as the FAQ) */
.be-legal__num {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  color: var(--be-orange);
  font: 600 14px/1 var(--be-mono);
}
.be-legal__num svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.be-legal__contact {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
  padding: 48px;
  border-radius: 20px;
  background: var(--be-ink);
  color: #fff;
}
.be-legal__contact .be-eyebrow { flex-basis: 100%; }
.be-legal__contact-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }

@media (max-width: 1199.98px) {
  .be-legal__body { padding: 80px 10px 100px; }
  .be-legal__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 809.98px) {
  .be-legal { padding: 0 7px; }
  .be-legal__body { padding: 60px 0 80px; }
  .be-legal__section, .be-legal__contact { padding: 28px 22px; }
  .be-legal__section { font-size: 16px; }
  .be-legal__num { width: 44px; height: 44px; }
}