/* ==========================================================================
   SECTIONS — per-section layout (webdesign.md §6)
   ========================================================================== */

/* ---- 2. Hero ----------------------------------------------------------- */
/* Tall scroll track; the inner .hero__pin stays pinned for the choreography.
   The negative margin pulls the hero up under the floating header so its
   background art reaches the very top of the page (no bare canvas band). */
.hero {
  position: relative;
  height: 240vh;
  margin-top: calc(-1 * var(--oj-header-h, 67px));
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  background: var(--oj-parchment-glow);
}
@media (max-width: 900px) { .hero { height: 200vh; } }
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
}

.hero__headline {
  font-size: clamp(36px, 5.6vw, 58px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 18px 0 6px;
}
.hero__flourish {
  font-family: var(--oj-font-calligraphy);
  font-weight: 400;
  font-size: 1.28em;
  line-height: 1;
  color: var(--oj-accent-gold);
  letter-spacing: 0;
}
.hero__lead { max-width: 42ch; font-size: clamp(16px, 1.8vw, 19px); margin-top: 14px; }
@media (max-width: 900px) { .hero__lead { margin-inline: auto; } }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
@media (max-width: 900px) { .hero__cta { justify-content: center; } }

.hero__film {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--oj-font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--oj-text-secondary);
  padding: 10px 8px;
}
.hero__film .play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--oj-accent-gold);
  color: var(--oj-accent-gold);
  animation: compassPulse 2.4s ease-in-out infinite;
}
.hero__film .play svg { width: 15px; height: 15px; }

.hero__devices {
  position: relative;
  min-height: clamp(320px, 38vw, 460px);
  transform-style: preserve-3d;
}
.hero__device {
  position: absolute;
  top: 2%;
  width: min(46%, 196px);
  border-radius: 32px;
  background: #17110d;
  padding: 7px;
  box-shadow: var(--oj-shadow-lg), 0 44px 90px -24px rgba(44, 24, 16, 0.45);
  border: 1px solid #3d2f20;
}
.hero__device--left { inset-inline-start: 2%; z-index: 2; }
.hero__device--right { inset-inline-end: 2%; margin-top: 7%; z-index: 1; }
.hero__device img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19;
  border-radius: 25px;
  object-fit: cover;
  background: var(--oj-bg-surface-subtle);
  display: block;
}
.hero__device::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  translate: -50% 0;
  width: 34%;
  height: 5px;
  border-radius: 3px;
  background: rgba(245, 241, 232, 0.22);
  z-index: 2;
}
@media (max-width: 900px) {
  .hero__devices { max-width: 400px; margin-inline: auto; }
}

.hero__satellite--polaroid { width: min(30vw, 172px); }

/* ---- 3. Explorer ticker --------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--oj-border-warm);
  background: var(--oj-bg-surface-subtle);
  padding-block: clamp(36px, 6vw, 56px);
}
.ticker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.ticker__grid > * + *::before {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 12%;
  inset-inline-start: 0;
  width: 1px;
  background: var(--oj-border-warm);
}
.ticker__grid > * { position: relative; }
@media (max-width: 720px) {
  .ticker__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .ticker__grid > *:nth-child(3)::before { display: none; }
}

/* ---- 4. Feature modules ------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 68px);
}
.feature + .feature { border-top: 1px solid var(--oj-border-subtle); }
.feature__body { max-width: 44ch; }
.feature__index {
  font-family: var(--oj-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--oj-accent-gold);
  letter-spacing: 0.1em;
}
.feature__title {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 600;
  margin: 8px 0 14px;
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--oj-radius-md);
  background: var(--oj-compass-blue-subtle);
  color: var(--oj-compass-blue);
  margin-bottom: 18px;
}
.feature__icon svg { width: 22px; height: 22px; }

/* layout variants */
.feature--right .feature__visual { order: 2; }
.feature--right .feature__body { order: 1; }
.feature--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.feature--center .feature__body { order: 2; max-width: 52ch; }
.feature--center .feature__visual { order: 1; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; text-align: start; }
  .feature__visual { order: 1 !important; }
  .feature__body { order: 2 !important; margin-inline: 0; }
}

/* 4.1 polaroid stack */
.polaroid-stack {
  position: relative;
  min-height: 380px;
  display: grid;
  place-items: center;
}
.polaroid-stack .polaroid { position: absolute; max-width: 250px; }
.polaroid-stack .polaroid:nth-child(1) { --rot: -7deg; translate: -70px -6px; z-index: 1; }
.polaroid-stack .polaroid:nth-child(2) { --rot: 4deg; translate: 58px -22px; z-index: 2; }
.polaroid-stack .polaroid:nth-child(3) { --rot: -2deg; translate: 6px 44px; z-index: 3; }
.polaroid-stack .polaroid:hover { z-index: 5; }
@media (max-width: 860px) {
  .polaroid-stack .polaroid:nth-child(1) { translate: -54px -6px; }
  .polaroid-stack .polaroid:nth-child(2) { translate: 46px -20px; }
}

/* 4.2 world map with journey waypoints */
.worldmap {
  position: relative;
  margin: 0;
  border-radius: var(--oj-radius-lg);
  overflow: hidden;
  border: 1px solid var(--oj-border-warm);
  box-shadow: var(--oj-shadow-md);
  background: var(--oj-bg-surface-subtle);
}
.worldmap > img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 1; object-fit: cover; }
.worldmap__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.worldmap__line {
  fill: none;
  stroke: var(--oj-accent-gold);
  stroke-width: 0.7;
  stroke-dasharray: 1.4 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
.worldmap__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 26px;
  height: 26px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
}
.worldmap__pin > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--oj-compass-blue);
  border: 2px solid var(--oj-bg-surface);
  box-shadow: var(--oj-shadow-sm);
  transition: transform var(--oj-ease-micro), background-color var(--oj-ease-micro);
}
.worldmap__pin:hover > span { transform: scale(1.25); }
.worldmap__pin.is-active > span {
  background: var(--oj-accent-gold);
  transform: scale(1.35);
  animation: waypointGlow 2.4s ease-out infinite;
}
.worldmap__readout {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  display: grid;
  gap: 2px;
  padding: 7px 12px;
  border-radius: var(--oj-radius-md);
  background: color-mix(in srgb, var(--oj-bg-surface) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--oj-border-warm);
  box-shadow: var(--oj-shadow-sm);
  font-family: var(--oj-font-ui);
  white-space: nowrap;
}
.worldmap__readout [data-city-name] { font-size: 12.5px; font-weight: 700; color: var(--oj-text-primary); }
.worldmap__readout .coordinate { font-size: 10px; letter-spacing: 0.02em; }

.map-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.map-cities button {
  font-family: var(--oj-font-ui);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: var(--oj-radius-full);
  border: 1px solid var(--oj-border-warm);
  color: var(--oj-text-secondary);
  transition: all var(--oj-ease-micro);
}
.map-cities button:hover { border-color: var(--oj-accent-gold); }
.map-cities button[aria-pressed="true"] {
  background: var(--oj-text-primary);
  border-color: var(--oj-text-primary);
  color: var(--oj-bg-canvas);
}

/* 4.3 passport */
.passport {
  position: relative;
  width: min(86%, 320px);
  margin-inline: auto;
  filter: drop-shadow(var(--oj-shadow-lg));
}
.passport img { width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 520px) {
  .passport { width: min(72%, 260px); }
}

/* 4.4 offline */
.offline-visual {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 2px dashed var(--oj-border-warm);
  border-radius: var(--oj-radius-lg);
  background: var(--oj-bg-surface);
  box-shadow: var(--oj-shadow-sm);
}
.offline-visual__sky {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--oj-radius-md);
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #d7e4f1 0%, #f0ead9 100%);
}
[data-theme="dark"] .offline-visual__sky { background: linear-gradient(180deg, #26303f 0%, #171f1c 100%); }
.offline-visual__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.offline-arc {
  fill: none;
  stroke: var(--oj-accent-gold);
  stroke-width: 2;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  opacity: 0.55;
}
.offline-node { fill: var(--oj-accent-gold); }
.offline-mtn { fill: color-mix(in srgb, var(--oj-text-primary) 22%, transparent); }
[data-theme="dark"] .offline-mtn { fill: rgba(0, 0, 0, 0.35); }
.offline-plane {
  fill: var(--oj-text-primary);
  offset-path: path("M12 176 Q 200 14 388 150");
  offset-rotate: auto;
  offset-distance: 0%;
  animation: planeFly 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.offline-trail {
  fill: none;
  stroke: var(--oj-accent-gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: planeTrail 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes planeFly {
  0% { offset-distance: 0%; }
  70%, 100% { offset-distance: 100%; }
}
@keyframes planeTrail {
  0% { stroke-dashoffset: 100; }
  70%, 100% { stroke-dashoffset: 0; }
}
.offline-visual__signal {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--oj-bg-surface) 80%, transparent);
  backdrop-filter: blur(4px);
  color: var(--oj-status-error);
}
.offline-visual__signal svg { width: 18px; height: 18px; }
.status-badge { justify-self: start; }
@media (prefers-reduced-motion: reduce) {
  .offline-plane { animation: none; offset-distance: 50%; }
  .offline-trail { animation: none; stroke-dashoffset: 100; }
}

/* 4.5 language stamps — a page of collected greetings */
.lang-page {
  width: 100%;
  max-width: 460px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-lg);
  background:
    var(--oj-parchment-glow),
    var(--oj-bg-surface);
  box-shadow: var(--oj-shadow-sm);
}
@media (max-width: 860px) { .lang-page { max-width: 560px; grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .lang-page { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .lang-page { grid-template-columns: repeat(2, 1fr); } }

.lang-stamp {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 92px;
  padding: 12px 6px;
  border: 1.5px dashed var(--oj-border-warm);
  border-radius: var(--oj-radius-md);
  background: var(--oj-bg-surface);
  transform: rotate(var(--r, 0deg));
  transition: transform var(--oj-ease-component), border-color var(--oj-ease-micro),
    box-shadow var(--oj-ease-component);
}
.lang-stamp:hover {
  transform: rotate(0deg) translateY(-3px);
  border-color: var(--oj-accent-gold);
  box-shadow: var(--oj-shadow-md);
}
.lang-stamp__hi {
  font-family: var(--oj-font-handwriting);
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--oj-compass-blue);
}
.lang-stamp__name {
  font-family: var(--oj-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oj-text-secondary);
}
.lang-stamp__code {
  font-family: var(--oj-font-ui);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--oj-text-muted);
}
.lang-stamp:nth-child(3n) { --r: -1.6deg; }
.lang-stamp:nth-child(4n) { --r: 1.8deg; }
.lang-stamp:nth-child(5n) { --r: -1deg; }
.lang-stamp:nth-child(7n) { --r: 1.2deg; }

/* ---- 5. Interactive demo --------------------------------------------------- */
.demo { background: var(--oj-bg-surface-subtle); }
.demo__frame {
  max-width: 900px;
  margin-inline: auto;
  background: var(--oj-bg-surface);
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-xl);
  box-shadow: var(--oj-shadow-lg);
  overflow: hidden;
}
.demo__tabs {
  display: flex;
  gap: 2px;
  padding: 10px;
  border-bottom: 1px solid var(--oj-border-subtle);
  background: var(--oj-bg-surface-subtle);
  overflow-x: auto;
}
.demo__tabs button {
  flex: none;
  font-family: var(--oj-font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--oj-radius-full);
  color: var(--oj-text-secondary);
}
.demo__tabs button[aria-selected="true"] {
  background: var(--oj-bg-surface);
  color: var(--oj-text-primary);
  box-shadow: var(--oj-shadow-sm);
}
.demo__stage {
  position: relative;
  min-height: 240px;
  margin: 20px;
  padding: 28px;
  display: grid;
  align-content: center;
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-lg);
  background:
    var(--oj-parchment-glow),
    repeating-linear-gradient(var(--oj-bg-surface) 0 31px, var(--oj-border-subtle) 31px 32px);
}
/* The four panels share one grid cell. Fading the inactive ones out left them
   in the accessibility tree, so a screen reader read all four at once.
   visibility takes them out of it; it is deliberately not transitioned, so the
   outgoing panel disappears at once while the incoming one fades in over it. */
.demo__panel {
  grid-area: 1 / 1;
  align-self: center;
  max-width: 46ch;
  opacity: 0;
  visibility: hidden;
  transform: rotateY(-8deg);
  transform-origin: left center;
  transition: opacity var(--oj-ease-component), transform var(--oj-ease-component);
  pointer-events: none;
}
.demo__panel[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.demo__panel h3 {
  font-size: 21px;
  margin-bottom: 8px;
  font-family: var(--oj-font-handwriting);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.demo__panel p { color: var(--oj-text-secondary); font-size: 15px; margin: 0; }

/* ---- 6. Chronicles --------------------------------------------------------- */
.chronicles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 34px);
}
.chronicles__grid > *:nth-child(2) { --rot: 1.4deg; margin-top: 22px; }
.chronicles__grid > *:nth-child(3) { --rot: -0.6deg; }
@media (max-width: 900px) { .chronicles__grid { grid-template-columns: 1fr; } }

/* ---- 7. Conversion --------------------------------------------------------- */
.conversion__trunk {
  background: #1a1410;
  color: #f5f1e8;
  border: 2px solid var(--oj-accent-gold);
  border-radius: var(--oj-radius-xl);
  padding: clamp(32px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  box-shadow: inset 0 0 0 1px rgba(212, 165, 116, 0.25), var(--oj-shadow-lg);
}
.conversion__trunk h2 { color: #f5f1e8; }
.conversion__trunk p { color: #d4a574; }
.conversion__stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.conversion__qr { justify-self: end; }
@media (max-width: 820px) {
  .conversion__trunk { grid-template-columns: 1fr; text-align: center; }
  .conversion__stores { justify-content: center; }
  .conversion__qr { justify-self: center; }
}

/* ---- 8. Footer ----------------------------------------------------------- */
.site-footer {
  background: var(--oj-bg-surface);
  border-top: 1px solid var(--oj-border-warm);
  padding-block: clamp(48px, 7vw, 80px) 28px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--oj-border-subtle);
}
@media (max-width: 960px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand p { color: var(--oj-text-muted); font-size: 14px; max-width: 32ch; }
.footer__col h3 {
  font-family: var(--oj-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oj-text-muted);
  margin-bottom: 14px;
}
.footer__col a {
  display: block;
  font-family: var(--oj-font-ui);
  font-size: 14px;
  color: var(--oj-text-secondary);
  padding: 5px 0;
}
.footer__col a:hover { color: var(--oj-accent-gold-hover); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  font-family: var(--oj-font-ui);
  font-size: 12px;
  color: var(--oj-text-muted);
}
.footer__social { display: flex; gap: 8px; }

/* ---- 9. Legal pages ------------------------------------------------------
   Long-form statutory prose, set as the index-and-chapters of a printed book:
   a ruled contents rail on the left, numbered chapters on the right. All values
   come from tokens.css, so dark mode follows for free.
   -------------------------------------------------------------------------- */
.legal-layout { padding-block: clamp(48px, 8vw, 96px); }

/* Source order is masthead -> contents -> document, which is the right reading
   order on a phone. On wide screens the grid lifts the contents into a rail
   that runs alongside both. */
@media (min-width: 1180px) {
  .legal-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 760px);
    gap: 0 64px;
    justify-content: center;
    align-items: start;
  }
  .legal-masthead { grid-column: 2; grid-row: 1; }
  .legal-toc { grid-column: 1; grid-row: 1 / span 2; }
  .legal { grid-column: 2; grid-row: 2; }
}

.legal { max-width: 760px; margin-inline: auto; }

/* ---- Contents rail ---- */
.legal-toc {
  margin: 34px 0 8px;
  padding: 2px 20px;
  background: var(--oj-bg-surface);
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-lg);
  box-shadow: var(--oj-shadow-sm);
}
.legal-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--oj-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oj-text-secondary);
}
.legal-toc__summary::-webkit-details-marker { display: none; }
.legal-toc__chevron {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--oj-accent-gold);
  transition: transform var(--oj-ease-micro);
}
.legal-toc[open] .legal-toc__chevron { transform: rotate(180deg); }

.legal-toc__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  counter-reset: none;
}
.legal-toc__list li + li a { border-top: 1px dotted var(--oj-border-warm); }
.legal-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 9px 0;
  font-family: var(--oj-font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--oj-text-secondary);
}
.legal-toc__num {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--oj-text-muted);
  font-variant-numeric: lining-nums;
}
.legal-toc__list a:hover { color: var(--oj-accent-gold-hover); }
.legal-toc__list a.is-active { color: var(--oj-accent-gold-hover); font-weight: 600; }
.legal-toc__list a.is-active .legal-toc__num { color: var(--oj-accent-gold); }

@media (min-width: 1180px) {
  .legal-toc {
    position: sticky;
    top: calc(var(--oj-header-h, 64px) + 32px);
    max-height: calc(100vh - var(--oj-header-h, 64px) - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--oj-border-warm) transparent;
    margin: 0;
    padding-block: 6px;
  }
  .legal-toc__summary { display: none; }
  .legal-toc__list { margin-block: 12px; }
}

/* ---- Masthead ---- */
.legal-masthead h1 {
  font-size: clamp(31px, 5vw, 46px);
  margin: 18px 0 0.35em;
}
.legal-masthead .lead { max-width: 58ch; }
.legal-masthead .status-badge { margin-top: 6px; }
.status-badge__mark { color: var(--oj-accent-gold); font-size: 11px; line-height: 1; }

/* ---- Chapters ---- */
.legal-section {
  margin-top: 54px;
}
.legal-section:first-child {
  margin-top: 34px;
}
.legal-section {
  scroll-margin-top: calc(var(--oj-header-h, 64px) + 28px);
}
.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 13px;
  font-size: clamp(21px, 2.6vw, 25px);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--oj-border-warm);
}
.legal-section__num {
  flex: none;
  font-family: var(--oj-font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--oj-accent-gold);
  font-variant-numeric: lining-nums;
}
.legal h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 30px 0 10px;
}
.legal p,
.legal li { color: var(--oj-text-primary); }
.legal ul,
.legal ol { margin: 0 0 1.15em; padding-inline-start: 24px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--oj-accent-gold); }
.legal strong { font-weight: 600; }
.legal code {
  font-family: var(--oj-font-ui);
  font-size: 0.88em;
  background: var(--oj-accent-gold-subtle);
  border-radius: var(--oj-radius-sm);
  padding: 1px 6px;
}
.legal-contact { word-break: break-word; }

/* ---- Notice callout (the "IMPORTANT / ÖNEMLİ" blockquotes) ---- */
.legal-note {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--oj-bg-surface);
  border: 1px solid var(--oj-border-warm);
  border-inline-start: 3px dashed var(--oj-accent-gold);
  border-radius: var(--oj-radius-md);
  box-shadow: var(--oj-shadow-sm);
}
.legal-note__label {
  font-family: var(--oj-font-ui);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oj-accent-gold-hover);
  margin: 0 0 12px;
}
.legal-note p,
.legal-note li { color: var(--oj-text-primary); }
.legal-note > :last-child { margin-bottom: 0; }
/* The prevailing-language clause is advisory, not a warning: same card, quieter. */
.legal-note--prevailing {
  margin-top: 0;
  border-inline-start-style: solid;
  border-inline-start-color: var(--oj-compass-blue);
}
.legal-note--prevailing .legal-note__label { color: var(--oj-compass-blue); }

/* ---- Fine print (warranty disclaimer, liability cap) ----
   Kept in capitals because those clauses must stay conspicuous, but set in the
   UI face at a smaller size with more leading so the block is still readable. */
.legal-fineprint {
  margin: 22px 0;
  padding: 22px 24px;
  background: var(--oj-bg-surface-subtle);
  border: 1px solid var(--oj-border-subtle);
  border-radius: var(--oj-radius-md);
  font-family: var(--oj-font-ui);
}
.legal-fineprint p,
.legal-fineprint li {
  font-size: 13.5px;
  line-height: 1.78;
  letter-spacing: 0.005em;
}
.legal-fineprint > :last-child { margin-bottom: 0; }

/* ---- Legal-basis table ---- */
.legal-table__scroll {
  overflow-x: auto;
  margin: 22px 0 1.5em;
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-md);
  background: var(--oj-bg-surface);
}
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-family: var(--oj-font-ui);
  font-size: 13px;
}
.legal-table th,
.legal-table td {
  text-align: start;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--oj-border-subtle);
}
.legal-table thead th {
  background: var(--oj-bg-surface-subtle);
  color: var(--oj-text-primary);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-table td { color: var(--oj-text-secondary); }
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* ---- End-of-document cross reference ---- */
.legal-foot {
  margin-top: 68px;
  padding-top: 34px;
  border-top: 1px solid var(--oj-border-warm);
}
.legal-foot__card {
  display: block;
  padding: 22px 26px;
  background: var(--oj-bg-surface);
  border: 1px solid var(--oj-border-warm);
  border-radius: var(--oj-radius-lg);
  box-shadow: var(--oj-shadow-sm);
  transition: border-color var(--oj-ease-micro), box-shadow var(--oj-ease-micro), transform var(--oj-ease-micro);
}
.legal-foot__card:hover {
  border-color: var(--oj-accent-gold);
  box-shadow: var(--oj-shadow-md);
  transform: translateY(-2px);
}
.legal-foot__kicker {
  display: block;
  font-family: var(--oj-font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oj-text-muted);
}
.legal-foot__title {
  display: block;
  font-family: var(--oj-font-heading);
  font-size: 21px;
  font-weight: 700;
  color: var(--oj-text-primary);
  margin-top: 9px;
}
.legal-foot__blurb {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--oj-text-secondary);
  margin-top: 7px;
  max-width: 52ch;
}
.legal-foot__back {
  margin: 24px 0 0;
  font-family: var(--oj-font-ui);
  font-size: 14px;
}