/* =====================================================================
   Beyond Journey - legal pages (bjlg-)
   ---------------------------------------------------------------------
   Written for the Privacy Policy (2026-09-28, the owner asked for a
   professional rebuild of the old template page) and kept generic so the
   Terms & Conditions and Cancellation Policy pages can move onto it.

   Same language as About and Contact (bj-about.css, bj-contact.css):
   navy #17233e, orange #f5761a, Poppins, 18px card radii, pill buttons,
   and the drawn navy hero. Scoped to .bjlg so nothing reaches the header,
   footer or the template; style.css's `section` padding, `ul li`
   inline-block and grey text, and capitalised headings are all undone
   below.

   Icons: Font Awesome's script swaps every <i class="fa"> for an <svg>
   whose own .fa-w-N width rule beats descendant selectors, so every disc
   is drawn on a wrapper span and the glyph inside is sized in em.

   js/bj-legal.js highlights the contents entry for the section being
   read and fills the progress bar; js/about.js runs the .reveal fade.
   Without JS the page is complete and every link still jumps.
   ===================================================================== */

.bjlg {
  --bjlg-navy: #17233e;
  --bjlg-navy-2: #22315a;
  --bjlg-orange: #f5761a;
  --bjlg-orange-600: #dd660f;
  --bjlg-orange-50: #fff3e8;
  --bjlg-green: #1faa59;
  --bjlg-green-50: #e8f8ee;
  --bjlg-indigo: #4f46b8;
  --bjlg-indigo-50: #eeedfb;
  --bjlg-amber-50: #fff8e6;
  --bjlg-amber-line: #f3dfae;
  --bjlg-ink: #17233e;
  --bjlg-body: #4a5470;
  --bjlg-faint: #7b8395;
  --bjlg-line: #e9e8e3;
  --bjlg-canvas: #f7f6f2;
  --bjlg-surface: #ffffff;
  --bjlg-r: 18px;
  --bjlg-r-sm: 12px;
  --bjlg-shadow: 0 10px 30px rgba(23, 35, 62, .07);
  --bjlg-shadow-lg: 0 24px 60px rgba(23, 35, 62, .16);
  --bjlg-ease: cubic-bezier(.4, 0, .2, 1);
  /* the header's pinned navigation row, plus breathing room: the sticky
     contents card and every jump target clear it */
  --bjlg-top: 84px;

  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--bjlg-body);
  overflow-x: clip;   /* clip, not hidden: hidden would break position: sticky */
}

.bjlg *, .bjlg *::before, .bjlg *::after { box-sizing: border-box; }
/* style.css names Inter for headings but no page loads it, so they fall back
   to Arial; here they take the page's Poppins, and keep the case written */
.bjlg :where(h1, h2, h3, h4) { color: var(--bjlg-ink); margin: 0; font-family: inherit; text-transform: none; }
.bjlg :where(p, ul, ol) { margin: 0; }
.bjlg :where(ul) { list-style: none; padding: 0; }
.bjlg :where(ul li) { display: block; margin: 0; color: inherit; line-height: inherit; }
.bjlg a { text-decoration: none; }
.bjlg section { padding: 0; margin: 0; position: relative; }

.bjlg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .2s var(--bjlg-ease), box-shadow .2s var(--bjlg-ease),
              background-color .2s var(--bjlg-ease), border-color .2s var(--bjlg-ease), color .2s;
}
.bjlg-btn > svg, .bjlg-btn > i { font-size: 13px; }
.bjlg .bjlg-btn--primary { background: var(--bjlg-orange); color: #fff; box-shadow: 0 10px 24px rgba(245, 118, 26, .3); }
.bjlg .bjlg-btn--primary:hover { background: var(--bjlg-orange-600); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(245, 118, 26, .36); }
.bjlg .bjlg-btn--glass { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .32); }
.bjlg .bjlg-btn--glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); color: #fff; }
.bjlg-btn:focus-visible, .bjlg-gl:focus-visible, .bjlg-toc a:focus-visible, .bjlg-print:focus-visible,
.bjlg-help__mail:focus-visible, .bjlg-related a:focus-visible {
  outline: 3px solid rgba(245, 118, 26, .45); outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Hero - drawn, like Contact: navy, glows, a dot grid and a flight path
   ------------------------------------------------------------------ */
.bjlg .bjlg-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 52px 0 124px;
  background:
    radial-gradient(560px 440px at 78% 42%, rgba(245, 118, 26, .24), rgba(245, 118, 26, 0) 70%),
    radial-gradient(640px 520px at -4% 104%, rgba(108, 92, 231, .32), rgba(108, 92, 231, 0) 70%),
    radial-gradient(420px 320px at 38% -10%, rgba(64, 132, 214, .22), rgba(64, 132, 214, 0) 70%),
    linear-gradient(125deg, #0f1930 0%, #17233e 48%, #243463 100%);
  color: #fff;
}
.bjlg .bjlg-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 62%);
}
.bjlg .bjlg-hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 90px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 1px solid rgba(255, 255, 255, .08);
}
.bjlg-hero__path {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.6; stroke-dasharray: 2 9; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: bjlg-dash 30s linear infinite;
}
@keyframes bjlg-dash { to { stroke-dashoffset: -220; } }

.bjlg-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.bjlg-hero__text { min-width: 0; }
.bjlg-hero__crumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.bjlg-hero__crumbs a { color: rgba(255, 255, 255, .85); }
.bjlg-hero__crumbs a:hover { color: #fff; }
.bjlg-hero__crumbs span::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.bjlg-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bjlg-hero__kicker > svg, .bjlg-hero__kicker > i { color: var(--bjlg-orange); font-size: 12px; }
.bjlg .bjlg-hero h1 {
  color: #fff; font-size: 42px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em;
  margin: 18px 0 14px;
}
.bjlg .bjlg-hero h1 em { font-style: normal; color: var(--bjlg-orange); }
.bjlg-hero__lead { max-width: 560px; font-size: 14.5px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.bjlg-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.bjlg .bjlg-hero__meta li {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 5px 13px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #fff;
}
.bjlg-hero__dot {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px;
  background: rgba(245, 118, 26, .22); border: 1px solid rgba(245, 118, 26, .55); color: #ffb27a;
}
.bjlg-hero__dot > svg, .bjlg-hero__dot > i { width: 1em; height: 1em; font-size: inherit; }

/* the art: the policy as a sheet of paper, a shield with a lock over its
   corner, and the three safeguards from section 5 floating around it */
.bjlg-hero__art { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; justify-self: end; }
.bjlg-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.bjlg-ring--outer { inset: 0; border: 1px dashed rgba(255, 255, 255, .2); animation: bjlg-spin 70s linear infinite; }
.bjlg-ring--inner { inset: 12%; border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(circle, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%); }
.bjlg-paper {
  position: absolute; left: 22%; top: 17%; width: 44%; aspect-ratio: .78;
  padding: 7% 7% 0; border-radius: 14px;
  background: #fff; transform: rotate(-7deg);
  box-shadow: 0 26px 50px rgba(5, 10, 25, .45);
  display: flex; flex-direction: column; gap: 7%;
}
.bjlg-paper__top { display: flex; align-items: center; gap: 9%; }
.bjlg-paper__badge {
  flex: 0 0 30%; aspect-ratio: 1; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
  background: var(--bjlg-orange-50); color: var(--bjlg-orange);
}
.bjlg-paper__badge > svg, .bjlg-paper__badge > i { width: 1em; height: 1em; }
.bjlg-paper__title { flex: 1; display: grid; gap: 6px; }
.bjlg-paper__title span { display: block; height: 7px; border-radius: 4px; background: var(--bjlg-navy); }
.bjlg-paper__title span + span { width: 62%; background: #d9dbe3; }
.bjlg-paper__line { display: block; height: 6px; border-radius: 4px; background: #e6e7ec; }
.bjlg-paper__line:nth-of-type(1) { width: 92%; }
.bjlg-paper__line:nth-of-type(2) { width: 100%; }
.bjlg-paper__line:nth-of-type(3) { width: 76%; }
.bjlg-paper__line:nth-of-type(4) { width: 88%; }
.bjlg-paper__line:nth-of-type(5) { width: 54%; }
.bjlg-shield {
  position: absolute; right: 13%; bottom: 13%; width: 38%; height: auto;
  filter: drop-shadow(0 22px 34px rgba(221, 102, 15, .45));
  animation: bjlg-float 7s ease-in-out infinite;
}
.bjlg-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .96); color: var(--bjlg-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 14px 30px rgba(5, 10, 25, .32);
  animation: bjlg-float 6s ease-in-out infinite;
}
.bjlg-chip__ico {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.bjlg-chip__ico > svg, .bjlg-chip__ico > i { width: 1em; height: 1em; }
.bjlg-chip--ssl { left: -4%; top: 12%; }
.bjlg-chip--ssl .bjlg-chip__ico { background: var(--bjlg-green); }
.bjlg-chip--host { right: -6%; top: 36%; animation-delay: -2s; }
.bjlg-chip--host .bjlg-chip__ico { background: var(--bjlg-indigo); }
.bjlg-chip--wall { left: 2%; bottom: 8%; animation-delay: -4s; }
.bjlg-chip--wall .bjlg-chip__ico { background: var(--bjlg-orange); }
@keyframes bjlg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes bjlg-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------
   At a glance - four cards lifted over the hero's bottom edge
   ------------------------------------------------------------------ */
/* the lower part of the strip is the policy's canvas, so the cards sit on
   one continuous background from the hero down */
.bjlg .bjlg-glance { margin-top: -80px; background: linear-gradient(180deg, transparent 80px, var(--bjlg-canvas) 80px); }
.bjlg-glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bjlg-glance__grid > li { display: flex; }
/* the icon on the left and the words beside it (the owner asked for this on
   2026-09-28, here and in every icon card on the page); "Section N" sits at
   the foot of the text column so the four cards end on one line */
.bjlg .bjlg-gl {
  position: relative; flex: 1;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  column-gap: 14px; align-items: start;
  padding: 20px 18px 18px; border-radius: var(--bjlg-r);
  background: var(--bjlg-surface); border: 1px solid var(--bjlg-line); box-shadow: var(--bjlg-shadow);
  color: var(--bjlg-body);
  transition: transform .25s var(--bjlg-ease), box-shadow .25s var(--bjlg-ease), border-color .25s;
}
.bjlg .bjlg-gl:hover { transform: translateY(-5px); box-shadow: var(--bjlg-shadow-lg); border-color: transparent; color: var(--bjlg-body); }
.bjlg-gl__ico {
  grid-column: 1; grid-row: 1 / span 2;
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; font-size: 17px;
  background: var(--bjlg-orange-50); color: var(--bjlg-orange);
  transition: background-color .25s var(--bjlg-ease), color .25s var(--bjlg-ease);
}
.bjlg-gl__ico > svg, .bjlg-gl__ico > i { width: 1em; height: 1em; font-size: inherit; }
.bjlg-gl--indigo .bjlg-gl__ico { background: var(--bjlg-indigo-50); color: var(--bjlg-indigo); }
.bjlg-gl--green .bjlg-gl__ico { background: var(--bjlg-green-50); color: var(--bjlg-green); }
.bjlg-gl--navy .bjlg-gl__ico { background: var(--bjlg-navy); color: #fff; }
.bjlg-gl:hover .bjlg-gl__ico { background: var(--bjlg-orange); color: #fff; }
.bjlg-gl--indigo:hover .bjlg-gl__ico { background: var(--bjlg-indigo); }
.bjlg-gl--green:hover .bjlg-gl__ico { background: var(--bjlg-green); }
.bjlg-gl--navy:hover .bjlg-gl__ico { background: var(--bjlg-orange); }
.bjlg-gl__title { grid-column: 2; grid-row: 1; padding-top: 1px; font-size: 15.5px; font-weight: 700; color: var(--bjlg-ink); letter-spacing: -.01em; line-height: 1.3; }
.bjlg-gl__text { grid-column: 2; grid-row: 2; margin-top: 5px; font-size: 12.5px; line-height: 1.6; }
.bjlg-gl__more {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: start;
  display: inline-flex; align-items: center; gap: 7px; padding-top: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bjlg-orange);
  transition: gap .2s var(--bjlg-ease);
}
.bjlg-gl__more > svg, .bjlg-gl__more > i { font-size: 10px; }
.bjlg-gl:hover .bjlg-gl__more { gap: 11px; }

/* ------------------------------------------------------------------
   Body: contents on the left, the policy on the right
   ------------------------------------------------------------------ */
.bjlg .bjlg-body { padding: 44px 0 72px; background: var(--bjlg-canvas); }
.bjlg-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 32px; align-items: start; }

.bjlg-side { position: sticky; top: var(--bjlg-top); display: grid; gap: 16px; }
.bjlg-toc {
  padding: 20px 14px 14px; border-radius: var(--bjlg-r);
  background: var(--bjlg-surface); border: 1px solid var(--bjlg-line); box-shadow: var(--bjlg-shadow);
}
.bjlg-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; list-style: none; }
.bjlg-toc__head::-webkit-details-marker { display: none; }
.bjlg-toc__head::marker { content: ""; }
/* the fold only works below 992px; on a wide screen the summary is a plain
   heading (js/bj-legal.js cancels the toggle there) */
.bjlg-toc__head { cursor: default; }
.bjlg-toc__chev { display: none; }
.bjlg-toc__head:focus-visible { outline: 3px solid rgba(245, 118, 26, .45); outline-offset: 3px; border-radius: 8px; }
.bjlg-toc__title { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bjlg-ink); }
.bjlg-toc__pct { font-size: 11.5px; font-weight: 600; color: var(--bjlg-faint); font-variant-numeric: tabular-nums; }
.bjlg-toc__bar { display: block; height: 4px; margin: 12px 8px 10px; border-radius: 4px; background: #eeede8; overflow: hidden; }
.bjlg-toc__bar > span {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--bjlg-orange), #ffb27a);
  transform-origin: left; transform: scaleX(0); transition: transform .15s linear;
}
.bjlg .bjlg-toc a {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 8px 9px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--bjlg-body);
  transition: background-color .2s var(--bjlg-ease), color .2s;
}
.bjlg .bjlg-toc a:hover { background: var(--bjlg-canvas); color: var(--bjlg-ink); }
.bjlg-toc__n {
  flex: 0 0 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bjlg-canvas); color: var(--bjlg-faint);
  transition: background-color .2s var(--bjlg-ease), color .2s;
}
.bjlg .bjlg-toc a.is-active { background: var(--bjlg-orange-50); color: var(--bjlg-ink); font-weight: 600; }
.bjlg .bjlg-toc a.is-active .bjlg-toc__n { background: var(--bjlg-orange); color: #fff; }
.bjlg .bjlg-toc a.is-read .bjlg-toc__n { color: var(--bjlg-orange-600); }
.bjlg-print {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 10px; border: 0; border-top: 1px solid var(--bjlg-line); border-radius: 0 0 10px 10px;
  background: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--bjlg-faint); cursor: pointer;
  transition: color .2s;
}
.bjlg-print:hover { color: var(--bjlg-ink); }
.bjlg-print > svg, .bjlg-print > i { font-size: 12px; }

.bjlg-help {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 16px; border-radius: var(--bjlg-r);
  background: linear-gradient(140deg, var(--bjlg-navy) 0%, var(--bjlg-navy-2) 100%); color: rgba(255, 255, 255, .78);
}
.bjlg-help::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245, 118, 26, .34), rgba(245, 118, 26, 0) 70%);
}
.bjlg-help > div { min-width: 0; }
.bjlg-help__ico {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center; font-size: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #ffb27a;
}
.bjlg-help__ico > svg, .bjlg-help__ico > i { width: 1em; height: 1em; }
/* sized so the title and the address each fit one line in the 272px column
   (the owner found the larger type broke the address mid-word, 2026-09-28) */
.bjlg-help strong { display: block; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.35; }
.bjlg-help p { margin-top: 3px; font-size: 11.5px; line-height: 1.55; }
.bjlg .bjlg-help__mail {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11.5px; font-weight: 700; color: #ffb27a; white-space: nowrap;
}
.bjlg .bjlg-help__mail:hover { color: #fff; }
.bjlg-help__mail > svg, .bjlg-help__mail > i { font-size: 10px; }

/* the policy itself */
.bjlg-content { display: grid; gap: 18px; min-width: 0; }
.bjlg .bjlg-card, .bjlg .bjlg-sec {   /* (0,2,0): .bjlg section zeroes padding */
  padding: 32px 36px; border-radius: var(--bjlg-r);
  background: var(--bjlg-surface); border: 1px solid var(--bjlg-line);
}
.bjlg-sec { scroll-margin-top: var(--bjlg-top); }
.bjlg-content p { font-size: 14.5px; line-height: 1.8; color: var(--bjlg-body); }
.bjlg-content p + p { margin-top: 12px; }
.bjlg-content strong { color: var(--bjlg-ink); font-weight: 600; }

.bjlg-intro { position: relative; overflow: hidden; }
.bjlg-intro::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--bjlg-orange), #ffb27a);
}
.bjlg .bjlg-intro p { font-size: 15px; }
.bjlg-agree {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 18px; padding: 14px 16px; border-radius: var(--bjlg-r-sm);
  background: var(--bjlg-canvas);
}
.bjlg-agree__ico {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--bjlg-navy); color: #fff;
}
.bjlg-agree__ico > svg, .bjlg-agree__ico > i { width: 1em; height: 1em; }
.bjlg .bjlg-agree p { font-size: 13.5px; line-height: 1.65; color: var(--bjlg-ink); padding-top: 4px; }

.bjlg-sec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bjlg-sec__n {
  flex: 0 0 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em;
  background: var(--bjlg-orange-50); color: var(--bjlg-orange-600);
}
.bjlg .bjlg-sec h2 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.bjlg .bjlg-sec h2:focus { outline: none; }
.bjlg .bjlg-sec h3 { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.bjlg .bjlg-lead-in { margin-top: 18px; margin-bottom: 12px; font-weight: 600; color: var(--bjlg-ink); font-size: 14px; }

/* 1 - where the policy applies: four source tiles */
.bjlg-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.bjlg .bjlg-sources li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border-radius: 14px; border: 1px solid var(--bjlg-line); background: #fcfcfa;
}
.bjlg-sources__ico, .bjlg-uses__ico, .bjlg-tags__ico, .bjlg-checks__ico {
  display: grid; place-items: center; flex-shrink: 0;
}
.bjlg-sources__ico { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; background: var(--bjlg-orange-50); color: var(--bjlg-orange); }
.bjlg-sources li:nth-child(2) .bjlg-sources__ico { background: var(--bjlg-indigo-50); color: var(--bjlg-indigo); }
.bjlg-sources li:nth-child(3) .bjlg-sources__ico { background: var(--bjlg-green-50); color: var(--bjlg-green); }
.bjlg-sources li:nth-child(4) .bjlg-sources__ico { background: var(--bjlg-navy); color: #fff; }
.bjlg-sources__ico > svg, .bjlg-sources__ico > i,
.bjlg-uses__ico > svg, .bjlg-uses__ico > i,
.bjlg-tags__ico > svg, .bjlg-tags__ico > i,
.bjlg-checks__ico > svg, .bjlg-checks__ico > i { width: 1em; height: 1em; font-size: inherit; }
.bjlg-sources strong { display: block; font-size: 14px; line-height: 1.35; }
.bjlg .bjlg-sources p { margin-top: 4px; font-size: 13px; line-height: 1.65; }

/* 2 - what is collected: two panels of labelled rows */
.bjlg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.bjlg-panel { display: flex; flex-direction: column; padding: 20px; border-radius: 14px; background: var(--bjlg-canvas); }
.bjlg-panel__head { display: flex; align-items: center; gap: 10px; }
.bjlg-panel__tag {
  flex: 0 0 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--bjlg-navy); color: #fff;
}
.bjlg .bjlg-panel > p { margin-top: 10px; font-size: 13px; line-height: 1.65; }
.bjlg-tags { display: grid; gap: 8px; margin: 14px 0; }
.bjlg .bjlg-tags li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 9px; border-radius: 12px; background: #fff; border: 1px solid var(--bjlg-line);
  font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--bjlg-ink);
}
.bjlg-tags__ico { width: 30px; height: 30px; border-radius: 9px; font-size: 12px; background: var(--bjlg-orange-50); color: var(--bjlg-orange); }
.bjlg-panel--auto .bjlg-tags__ico { background: var(--bjlg-indigo-50); color: var(--bjlg-indigo); }
.bjlg .bjlg-panel__note {
  display: flex; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px dashed #dcdad2;
  font-size: 12.5px; line-height: 1.6; color: var(--bjlg-body);
}
.bjlg-panel__note > svg, .bjlg-panel__note > i { flex-shrink: 0; margin-top: 4px; font-size: 12px; color: var(--bjlg-faint); }

/* 3 - cookies: ticks and the reader's choice */
.bjlg-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bjlg .bjlg-checks li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bjlg-line);
  font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--bjlg-ink);
}
.bjlg-checks__ico { width: 26px; height: 26px; border-radius: 50%; font-size: 10px; background: var(--bjlg-green-50); color: var(--bjlg-green); }

.bjlg-callout {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--bjlg-indigo-50); border: 1px solid #dcd9f5;
}
.bjlg-callout__ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 14px;
  background: var(--bjlg-indigo); color: #fff;
}
.bjlg-callout__ico > svg, .bjlg-callout__ico > i { width: 1em; height: 1em; }
.bjlg-callout strong { display: block; font-size: 13.5px; line-height: 1.4; }
.bjlg .bjlg-callout p { margin-top: 3px; font-size: 13.5px; line-height: 1.65; }
.bjlg-callout--warn { background: var(--bjlg-amber-50); border-color: var(--bjlg-amber-line); }
.bjlg-callout--warn .bjlg-callout__ico { background: #c98a12; }
.bjlg-callout--plain { background: var(--bjlg-canvas); border-color: var(--bjlg-line); }
.bjlg-callout--plain .bjlg-callout__ico { background: var(--bjlg-navy); }

/* 4 - how it is used: six tiles, two across, the words beside the icon */
.bjlg-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.bjlg .bjlg-uses li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--bjlg-line); background: #fcfcfa;
  font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--bjlg-ink);
  transition: border-color .2s var(--bjlg-ease), box-shadow .2s var(--bjlg-ease);
}
.bjlg .bjlg-uses li:hover { border-color: #f6c9a4; box-shadow: var(--bjlg-shadow); }
.bjlg .bjlg-uses li > span:last-child { min-width: 0; }
.bjlg-uses__ico { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; background: var(--bjlg-orange-50); color: var(--bjlg-orange); }

/* 5 - the three safeguards as rows of one navy panel, each icon with its
   title and description beside it */
.bjlg-guards {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 18px; padding: 6px 24px; border-radius: 16px;
  background: linear-gradient(150deg, var(--bjlg-navy) 0%, var(--bjlg-navy-2) 100%);
}
.bjlg-guards::after {
  content: ""; position: absolute; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245, 118, 26, .3), rgba(245, 118, 26, 0) 70%);
}
.bjlg .bjlg-guards li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; }
.bjlg .bjlg-guards li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.bjlg .bjlg-guards li > div { min-width: 0; }
.bjlg-guards__ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #ffb27a;
}
.bjlg-guards__ico > svg, .bjlg-guards__ico > i { width: 1em; height: 1em; }
.bjlg .bjlg-guards h3 { color: #fff; font-size: 15px; padding-top: 1px; }
.bjlg .bjlg-guards p { margin-top: 4px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .76); }

/* 8 - contact, as the closing card */
.bjlg .bjlg-sec--cta {
  overflow: hidden; isolation: isolate; border: 0;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(245, 118, 26, .3), rgba(245, 118, 26, 0) 70%),
    linear-gradient(140deg, #111c35 0%, var(--bjlg-navy) 45%, var(--bjlg-navy-2) 100%);
}
.bjlg .bjlg-sec--cta h2 { color: #fff; }
.bjlg .bjlg-sec--cta .bjlg-sec__n { background: rgba(255, 255, 255, .1); color: #ffb27a; }
.bjlg .bjlg-sec--cta p { color: rgba(255, 255, 255, .8); max-width: 560px; }
.bjlg-cta__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.bjlg-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 4px 4px 0; }
.bjlg-related > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bjlg-faint); margin-right: 4px; }
.bjlg .bjlg-related a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid #dcdde3; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--bjlg-ink);
  transition: border-color .2s var(--bjlg-ease), color .2s;
}
.bjlg .bjlg-related a:hover { border-color: var(--bjlg-navy); color: var(--bjlg-ink); }
.bjlg-related a > svg, .bjlg-related a > i { font-size: 12px; color: var(--bjlg-orange); }

/* ------------------------------------------------------------------
   Hero with a photograph (2026-09-28, the owner asked for a background
   picture on all three legal banners). The page names its picture on the
   section: class="bjlg-hero bjlg-hero--photo"
   style="--bjlg-hero-photo: url('/img/...')" - a root-relative url, so it
   resolves the same wherever the variable is read. The orange glow stays
   on top; the navy is heavy under the text on the left and lighter on the
   right, where the drawing's white cards carry their own contrast.
   ------------------------------------------------------------------ */
.bjlg .bjlg-hero--photo {
  background:
    radial-gradient(560px 440px at 78% 42%, rgba(245, 118, 26, .2), rgba(245, 118, 26, 0) 70%),
    /* lightened the same day (was .9 / .78 / .5): the owner wanted more of the picture */
    linear-gradient(90deg, rgba(13, 22, 43, .74) 0%, rgba(20, 31, 57, .52) 45%, rgba(23, 35, 62, .18) 100%),
    var(--bjlg-hero-photo, none) center / cover no-repeat,
    #17233e;
}
.bjlg .bjlg-hero--photo h1, .bjlg-hero--photo .bjlg-hero__lead, .bjlg-hero--photo .bjlg-hero__crumbs {
  text-shadow: 0 2px 16px rgba(8, 14, 30, .6);
}
@media (max-width: 991px) {
  /* no drawing on the right here: the copy runs the full width, so the veil is even */
  .bjlg .bjlg-hero--photo {
    background:
      linear-gradient(180deg, rgba(13, 22, 43, .66) 0%, rgba(20, 31, 57, .54) 100%),
      var(--bjlg-hero-photo, none) center / cover no-repeat,
      #17233e;
  }
}

/* ------------------------------------------------------------------
   Scroll reveal (paired with js/about.js)
   ------------------------------------------------------------------ */
body.bj-js .bjlg .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--bjlg-ease), transform .6s var(--bjlg-ease);
  transition-delay: var(--d, 0ms);
}
body.bj-js .bjlg .reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.bj-js .bjlg .reveal { opacity: 1; transform: none; transition: none; }
  .bjlg-gl, .bjlg-btn, .bjlg-toc__bar > span, .bjlg-uses li { transition: none; }
  .bjlg-hero__path, .bjlg-ring--outer, .bjlg-shield, .bjlg-chip { animation: none; }
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
  .bjlg-layout { grid-template-columns: 256px minmax(0, 1fr); gap: 22px; }   /* 256: the help card's address still fits one line */
  .bjlg-glance__grid { grid-template-columns: repeat(2, 1fr); }
  .bjlg .bjlg-card, .bjlg .bjlg-sec { padding: 28px; }
}

/* the contents stop being a sticky column: they fold into one card at the
   top of the policy (js/bj-legal.js closes it on load), and the help card
   goes, since section 8 carries the same address */
@media (max-width: 991px) {
  .bjlg .bjlg-hero { padding: 48px 0 116px; }
  .bjlg .bjlg-hero h1 { font-size: 36px; }
  .bjlg-hero__grid { grid-template-columns: 1fr; }
  .bjlg-hero__art { display: none; }
  .bjlg-layout { grid-template-columns: 1fr; }
  .bjlg-side { position: static; }
  .bjlg-help { display: none; }
  .bjlg-toc { padding: 0; }
  .bjlg-toc__head { cursor: pointer; padding: 16px 20px; }
  .bjlg-toc__chev {
    display: block; width: 9px; height: 9px; margin: -4px 2px 0 auto;
    border-right: 2px solid var(--bjlg-faint); border-bottom: 2px solid var(--bjlg-faint);
    transform: rotate(45deg); transition: transform .25s var(--bjlg-ease), margin .25s;
  }
  .bjlg-toc__fold[open] .bjlg-toc__chev { transform: rotate(-135deg); margin-top: 4px; border-color: var(--bjlg-orange); }
  .bjlg-toc__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; padding: 0 10px 12px; }
  .bjlg-toc__bar, .bjlg-toc__pct, .bjlg-print { display: none; }
}

@media (max-width: 767px) {
  .bjlg .bjlg-body { padding: 28px 0 48px; }
  .bjlg .bjlg-hero { padding: 38px 0 96px; }
  .bjlg .bjlg-hero::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%); mask-image: linear-gradient(180deg, #000 0%, transparent 75%); }
  .bjlg .bjlg-hero h1 { font-size: 30px; margin-top: 14px; }
  .bjlg-hero__lead { font-size: 14px; }
  .bjlg .bjlg-glance { margin-top: -62px; }
  .bjlg-glance__grid { grid-template-columns: 1fr; gap: 10px; }
  .bjlg .bjlg-gl { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 14px 16px 14px 14px; border-radius: 16px; }
  .bjlg-gl__ico { align-self: center; }
  .bjlg-gl__title { font-size: 15px; }
  .bjlg-gl__text { margin-top: 2px; line-height: 1.5; }
  .bjlg-gl__more { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding: 0; }
  .bjlg-gl__more-label { display: none; }
  .bjlg-toc__list { grid-template-columns: 1fr; }
  .bjlg-guards { padding: 4px 16px; }
  .bjlg .bjlg-guards li { gap: 14px; padding: 16px 0; }
  .bjlg-guards__ico { flex-basis: 40px; width: 40px; height: 40px; font-size: 15px; }
  .bjlg-content { gap: 14px; }
  .bjlg .bjlg-card, .bjlg .bjlg-sec { padding: 22px 18px; border-radius: 16px; }
  .bjlg .bjlg-sec h2 { font-size: 19px; }
  .bjlg-sec__n { flex-basis: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
  .bjlg-content p { font-size: 14px; line-height: 1.75; }
  .bjlg .bjlg-intro p { font-size: 14px; }
  .bjlg-sources, .bjlg-split, .bjlg-checks, .bjlg-uses { grid-template-columns: 1fr; }
  .bjlg .bjlg-uses li { padding: 12px 14px; }
  .bjlg-panel { padding: 16px; }
  /* phone buttons are as wide as their label, centred in their card
     (the owner's rule, 2026-09-26) */
  .bjlg .bjlg-sec--cta { text-align: center; }
  .bjlg .bjlg-sec--cta .bjlg-sec__head { justify-content: center; }
  .bjlg .bjlg-sec--cta p { margin-left: auto; margin-right: auto; }
  .bjlg-cta__acts { justify-content: center; }
  .bjlg-related { justify-content: center; }
  .bjlg-related > span { flex-basis: 100%; text-align: center; margin: 0; }
}

@media (max-width: 575px) {
  .bjlg .bjlg-hero h1 { font-size: 27px; }
  .bjlg .bjlg-hero__meta li { font-size: 12px; }
}

/* ------------------------------------------------------------------
   Print: the policy, not the page around it
   ------------------------------------------------------------------ */
@media print {
  /* this file loads only on legal pages, so the site chrome can go too */
  .main_header_area, footer, .bjft { display: none !important; }
  .bjlg .bjlg-hero { padding: 0 0 16px; background: none; color: #000; }
  .bjlg .bjlg-hero::before, .bjlg .bjlg-hero::after, .bjlg-hero__path, .bjlg-hero__art,
  .bjlg-hero__crumbs, .bjlg-hero__meta, .bjlg-glance, .bjlg-side, .bjlg-related, .bjlg-cta__acts { display: none !important; }
  .bjlg .bjlg-hero h1, .bjlg .bjlg-hero h1 em, .bjlg-hero__kicker { color: #000; }
  .bjlg-hero__lead { color: #333; }
  .bjlg .bjlg-body { padding: 0; }
  .bjlg-layout { display: block; }
  .bjlg .bjlg-card, .bjlg .bjlg-sec { border: 0; padding: 12px 0; break-inside: avoid-page; }
  .bjlg .bjlg-sec--cta { background: none; }
  .bjlg .bjlg-sec--cta h2, .bjlg .bjlg-sec--cta p { color: #000; }
  .bjlg-guards { background: none; border: 1px solid #ccc; }
  .bjlg .bjlg-guards h3, .bjlg .bjlg-guards p { color: #000; }
  body.bj-js .bjlg .reveal { opacity: 1; transform: none; }
}