/* Parley's Nav, legal page, and Footer components, adapted for SotaYard's
   static documentation. Source: site/marketing/src/styles/{global,pages}.css.
   The shared tokens, typography, fonts, and Button component live in brand.css. */

.content-page {
  background: var(--background);
  color: var(--grey-900);
  font-family: var(--font-ui);
}

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: var(--background);
}

.nav {
  width: 100%;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 20px 12px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  height: 52px;
  color: var(--grey-900);
  text-decoration: none;
}

.sy-wordmark {
  font: 600 24px/1 var(--font-display);
  letter-spacing: -1px;
  color: var(--grey-900);
  text-decoration: none;
}

.sy-mark { width: 24px; height: 24px; fill: currentColor; margin-right: 9px; }
.nav__right { display: flex; align-items: center; gap: 28px; }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.nav__links a { font: 500 var(--m-size)/var(--body-line) var(--font-ui); color: var(--grey-900); text-decoration: none; transition: opacity 200ms var(--e-tween-out); }
.nav__links a:hover { opacity: .65; }
.nav__sep { width: 4px; height: 4px; background: var(--grey-900); flex-shrink: 0; }

.legal {
  width: min(700px, calc(100% - 40px));
  margin: 0 auto;
  padding: 68px 0 80px;
  text-align: center;
}

.legal--docs { width: min(860px, calc(100% - 40px)); }
.legal > *:not(.legal__title) { text-align: left; }
.legal__title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  color: var(--grey-900);
  letter-spacing: -.03em;
  text-wrap: balance;
}

.legal__intro {
  margin: 0 0 48px;
  font-size: var(--l-size);
  line-height: 1.7;
  color: var(--grey-800);
}

.legal__section { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.legal__h { margin: 0; font: var(--h4-weight) var(--h4-size)/var(--h4-line) var(--font-display); color: var(--grey-900); letter-spacing: -.02em; }
.legal__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.legal__body p { margin: 0; font-size: var(--l-size); line-height: 1.7; color: var(--grey-800); }
.legal a { color: var(--grey-900); text-decoration: underline; text-decoration-color: var(--grey-400); text-underline-offset: 4px; }
.legal a:hover { text-decoration-color: var(--brand-500); }
.legal code { font: .85em/1.7 var(--mono); overflow-wrap: anywhere; }
.legal p code { padding: 2px 5px; border-radius: 4px; background: var(--grey-100); color: var(--grey-900); }
.code-block { margin: 0; max-width: 100%; overflow: auto; padding: 24px; border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--white); color: var(--grey-900); text-align: left; tab-size: 2; }
.code-block code { font-size: 12px; line-height: 1.85; overflow-wrap: normal; }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--grey-200); border-radius: var(--radius-md); background: var(--white); }
.data-table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
.data-table th { background: var(--footer); color: var(--grey-900); font-weight: 500; }
.data-table td { color: var(--grey-800); }
.data-table th, .data-table td { padding: 15px 18px; border-bottom: 1px solid var(--grey-200); vertical-align: top; line-height: 1.6; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table th:nth-child(2), .data-table td:nth-child(2) { white-space: nowrap; }
.data-table td:first-child { color: var(--grey-900); font-weight: 500; }

.footer { width: 100%; background: var(--footer); }
.footer__inner { max-width: 1280px; margin: 0 auto; padding: 40px 20px 0; display: flex; flex-direction: column; }
.footer__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--grey-600); }
.footer__social-label { font: 400 var(--s-size)/var(--body-line) var(--font-ui); color: var(--grey-800); }
.footer__mid { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 20px 0 10px; }
.footer__tagline { margin: 0; font: 400 var(--s-size)/var(--body-line) var(--font-ui); color: var(--grey-800); width: 239px; }
.footer__cols { display: flex; gap: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 9px; width: 133px; }
.footer__col-title { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font: 600 var(--m-size)/var(--body-line) var(--font-ui); color: var(--grey-900); }
.footer__square { width: 7px; height: 7px; background: var(--brand-500); flex-shrink: 0; }
.footer__col a { font: 400 var(--m-size)/var(--body-line) var(--font-ui); color: var(--grey-800); text-decoration: none; padding-left: 16px; transition: color 160ms var(--e-tween-out); }
.footer__col a:hover { color: var(--grey-900); }
.footer__mark { position: relative; margin-top: 0; height: 235px; overflow: hidden; }
.footer__watermark { position: absolute; left: 0; top: -10px; width: 100%; height: 347px; display: block; }
.sy-watermark { display: block; font: 600 clamp(64px, 17vw, 224px)/.95 var(--font-display); letter-spacing: -.075em; color: var(--grey-400); }
.footer__mosaic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 624px; max-width: 80%; height: auto; pointer-events: none; z-index: 1; }
.footer__bottom { position: absolute; left: 0; bottom: 23px; width: 100%; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 400 var(--m-size)/var(--body-line) var(--font-ui); color: var(--grey-800); }
.footer__bottom p { margin: 0; }
.footer__bottom a { color: var(--grey-800); text-decoration: none; transition: color 160ms var(--e-tween-out); }
.footer__bottom a:hover { color: var(--grey-900); }

@media (max-width: 810px) {
  .legal { padding-top: 40px; padding-bottom: 40px; }
  .legal__title { margin-bottom: 24px; }
  .legal__intro { margin-bottom: 36px; }
  .code-block { padding: 18px; }
  .footer__inner { padding: 32px 20px 0; }
  .footer__mid { flex-direction: column; gap: 28px; }
  .footer__cols { width: 100%; gap: 20px; }
  .footer__col { flex: 1; min-width: 0; width: auto; }
  .footer__col a { font-size: 13px; }
  .footer__mark { height: 204px; margin-top: 24px; }
  .footer__watermark { height: 100px; top: 0; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; bottom: 24px; font-size: 12px; }
}

@media (max-width: 480px) {
  .sy-wordmark { font-size: 22px; }
  .sy-mark { width: 21px; height: 21px; margin-right: 7px; }
  .legal { width: calc(100% - 40px); }
  .footer__top { align-items: flex-start; }
  .footer__social-label { max-width: 145px; text-align: right; line-height: 1.5; }
  .footer__cols { gap: 12px; }
  .footer__col a { padding-left: 0; line-height: 1.4; }
  .footer__col-title { font-size: 13px; }
}

/* Parley navigation component: Desktop / Phone / Phone Open. */
/* ============================================================
   Navigation — ported from the project's Navigation component
   (variants Desktop / Phone / Phone Open) and its Workflow-links
   overlay. Springs come from the component's own transitions.
   ============================================================ */

.nav__toggle {
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--grey-900);
  cursor: pointer;
}
.nav__burger { display: block; width: 24px; height: 24px; position: relative; }
.nav__burger i {
  position: absolute;
  left: 3px;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--d-menu) var(--e-menu), opacity 120ms linear;
}
.nav__burger i:first-child { top: 9px; }
.nav__burger i:last-child  { top: 14px; }
.is-open .nav__burger i:first-child { transform: translateY(2.5px) rotate(45deg); }
.is-open .nav__burger i:last-child  { transform: translateY(-2.5px) rotate(-45deg); }

/* ---------- Workflow-links dropdown (desktop) ----------
   White panel, 12px radius, 4px gap, clipped; each row carries a 4px
   Brand square and a Background-token hover plate. */
.nav__item { position: relative; display: flex; align-items: center; }
/* The panel hangs 10px below the label, so the pointer would cross dead space
   on its way down and drop the hover. This bridges that gap. It only accepts
   the pointer while the item is already hovered or focused, so it never eats
   clicks meant for the page underneath. */
.nav__item--has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: 187px;
  height: 12px;
  pointer-events: none;
}
.nav__item--has-menu:hover::after,
.nav__item--has-menu:focus-within::after {
  pointer-events: auto;
}
.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 163px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 12px 24px rgba(37, 31, 25, 0.1);
  overflow: clip;
  opacity: 0;
  translate: -50% -4px;
  pointer-events: none;
  transition: opacity var(--d-spring) var(--e-spring),
              translate var(--d-spring) var(--e-spring);
}
.nav__item--has-menu:hover .nav__drop,
.nav__item--has-menu:focus-within .nav__drop {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}
.nav__dropitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: var(--m-size);
  line-height: var(--body-line);
  color: var(--grey-900);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-spring) var(--e-spring);
}
.nav__dropitem:hover { background: var(--background); }
.nav__dropdot {
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--brand-500);
}

/* ---------- Phone / Phone Open ----------
   The Framer phone variant stacks brand+burger on one row and reveals a
   vertical menu below it; padding grows 16/0 -> 20/20 when open. */
@media (max-width: 810px) {
  .nav-bar { background: var(--background); }
  .is-open.nav-bar { background: var(--background) !important; backdrop-filter: none !important; }

  .nav-bar .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    padding: 16px 16px 0;
    transition: padding var(--d-menu) var(--e-menu);
  }
  .nav-bar.is-open .nav { padding: 20px 16px; }

  .nav-bar .nav__brand   { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav-bar .nav__toggle  { display: block; grid-column: 2; grid-row: 1; justify-self: end; }

  .nav-bar .nav__right {
    --menu-padding-block: 16px;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      height var(--menu-duration, var(--d-menu)) var(--e-menu),
      padding var(--menu-duration, var(--d-menu)) var(--e-menu),
      opacity 160ms linear,
      visibility 0s linear var(--d-menu);
  }
  .nav-bar.is-open .nav__right {
    height: var(--menu-h, auto);
    padding: var(--menu-padding-block) 0;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition:
      height var(--menu-duration, var(--d-menu)) var(--e-menu),
      padding var(--menu-duration, var(--d-menu)) var(--e-menu),
      opacity 160ms linear,
      visibility 0s linear 0s;
  }

  .nav-bar .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: left;
  }
  .nav-bar .nav__item { align-items: flex-start; }
  .nav-bar .nav__item--has-menu::after { display: none; }
  .nav-bar .nav__sep { display: none; }
  .nav-bar .nav__links a { font-size: var(--h5-size); }

  .nav-bar .nav__item--has-menu { flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav-bar .nav__drop {
    position: static;
    translate: none;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    gap: 8px;
    min-width: 163px;
    background: none;
    box-shadow: none;
    overflow: visible;
    transition: none;
  }
  .nav-bar .nav__dropitem { padding: 8px 12px 8px 0; }
  /* The phone-open variant keeps the button at its intrinsic width, and the
     panel is a fixed-height flex column, so its children must not shrink. */
  .nav-bar .nav__cta { align-self: flex-start; width: auto; flex: none; }
  .nav-bar .nav__links { flex: none; }
  .nav-bar .nav__item { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav, .nav__right, .nav__drop, .nav__burger i, .nav__dropitem {
    transition-duration: 0.01ms !important;
  }
}


/* Keep the Parley menu within the screen on shorter mobile viewports. */
@media (max-width: 810px) {
  .nav-bar .nav__right { max-height: calc(100dvh - 92px); }
}
.nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--brand-500); }