/* ==========================================================================
   Legal pages — the paginated privacy policy and terms
   --------------------------------------------------------------------------
   Scoped to .page-legal via the body class.

   Kept deliberately plain: one reading column, a quiet contents sidebar, and
   navigation that stays out of the way until it is needed. A legal text is
   read, not browsed, so nothing here competes with the words.

     Desktop   contents as a sticky sidebar, divided from the text by a hairline
     Mobile    contents collapse into one "Contents" bar that opens on tap, so
               the policy starts on the first screen instead of after a list
   ========================================================================== */

.page-legal .legal-section {
  position: relative;
  z-index: 1;
}

/* Anything the pager or contents can jump to must clear the sticky header. */
.page-legal #document,
.page-legal .legal-part,
.page-legal .legal-block {
  scroll-margin-top: calc(var(--header-h, 80px) + 24px);
}

/* --- Layout -------------------------------------------------------------- */

.page-legal .legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.page-legal .legal-sidebar {
  position: sticky;
  top: calc(var(--header-h, 80px) + 28px);
}

/* ==========================================================================
   Contents
   ========================================================================== */

.page-legal .legal-toc {
  margin: 0;
}

.page-legal .legal-toc__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}

/* Hide the browser's own disclosure triangle; the chevron replaces it. */
.page-legal .legal-toc__summary::-webkit-details-marker {
  display: none;
}

.page-legal .legal-toc__title {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-legal .legal-toc__where {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.page-legal .legal-toc__chevron {
  color: var(--color-muted);
  font-size: 11px;
  transition: transform var(--transition-fast);
}

.page-legal .legal-toc[open] .legal-toc__chevron {
  transform: rotate(180deg);
}

.page-legal .legal-toc__parts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-legal .legal-toc__part-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 8px 14px;
  color: var(--color-default);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* A short amber bar marks the open part — enough to find your place without
   the boxes and rings a busier list would need. */
.page-legal .legal-toc__part-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}

.page-legal .legal-toc__part-link:hover,
.page-legal .legal-toc__part-link:focus-visible {
  color: var(--color-heading);
}

.page-legal .legal-toc__num {
  flex-shrink: 0;
  min-width: 14px;
  color: var(--color-faint);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-legal .legal-toc__part.is-current > .legal-toc__part-link {
  color: var(--color-heading);
  font-weight: 600;
}

.page-legal .legal-toc__part.is-current > .legal-toc__part-link::before {
  background: var(--color-primary);
}

.page-legal .legal-toc__part.is-current .legal-toc__num {
  color: var(--color-primary);
}

.page-legal .legal-toc__sections {
  margin: 0 0 6px 38px;
  padding: 0;
  list-style: none;
}

.page-legal .legal-toc__sections a {
  display: block;
  padding: 4px 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.page-legal .legal-toc__sections a:hover,
.page-legal .legal-toc__sections a:focus-visible {
  color: var(--color-primary);
}

.page-legal .legal-toc__mode {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.page-legal .legal-toc__mode a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}

.page-legal .legal-toc__mode a:hover,
.page-legal .legal-toc__mode a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Contents, desktop ---------------------------------------------------
   Held open by the script in the template. The summary becomes a plain label:
   nothing to click, no chevron, and no "Part n of N" (the text column already
   says it). A hairline separates the column from the text.
   ------------------------------------------------------------------------ */

@media (min-width: 992px) {
  .page-legal .legal-sidebar {
    padding-right: 28px;
    border-right: 1px solid var(--color-border);
  }

  .page-legal .legal-toc[open] .legal-toc__summary {
    margin-bottom: 12px;
    cursor: default;
    pointer-events: none;
  }

  .page-legal .legal-toc[open] .legal-toc__where,
  .page-legal .legal-toc[open] .legal-toc__chevron {
    display: none;
  }

  /* Part two lists eleven sections; on a short screen the list scrolls inside
     its own column rather than running off the bottom. The scrollbar is kept
     neutral — the site's amber one is far too loud in a narrow sidebar. */
  .page-legal .legal-toc__panel {
    max-height: calc(100vh - var(--header-h, 80px) - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
  }

  .page-legal .legal-toc__panel::-webkit-scrollbar {
    width: 4px;
  }

  .page-legal .legal-toc__panel::-webkit-scrollbar-track {
    background: transparent;
  }

  .page-legal .legal-toc__panel::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
  }
}

/* ==========================================================================
   Text column
   ========================================================================== */

.page-legal .legal-body {
  max-width: 760px;
  min-width: 0;
}

.page-legal .legal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.page-legal .legal-meta i {
  color: var(--color-primary);
  font-size: 0.9em;
}

.page-legal .legal-meta time {
  color: var(--color-heading);
  font-weight: 600;
}

.page-legal .legal-lede {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.page-legal .legal-lede p {
  margin: 0 0 12px;
  color: var(--color-default);
  font-size: var(--text-base);
  line-height: 1.7;
}

.page-legal .legal-lede p:last-child {
  margin-bottom: 0;
}

/* --- Parts --------------------------------------------------------------- */

.page-legal .legal-part + .legal-part {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-strong);
}

.page-legal .legal-part__head {
  margin-bottom: var(--space-md);
}

.page-legal .legal-part__eyebrow {
  margin: 0 0 6px;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-legal .legal-part__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
}

.page-legal .legal-progress {
  height: 3px;
  margin-top: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.page-legal .legal-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

/* --- Sections ------------------------------------------------------------ */

.page-legal .legal-block + .legal-block {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}

.page-legal .legal-block h3 {
  margin: 0 0 12px;
  color: var(--color-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
}

.page-legal .legal-block h4 {
  margin: 22px 0 8px;
  color: var(--color-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}

.page-legal .legal-block h3 + h4 {
  margin-top: 4px;
}

.page-legal .legal-block p {
  margin: 0 0 12px;
  color: var(--color-default);
  font-size: var(--text-base);
  line-height: 1.7;
}

.page-legal .legal-block > :last-child {
  margin-bottom: 0;
}

.page-legal .legal-block strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* Scoped to the policy text. Hung on .legal-body instead, this rule reached
   the pager and underlined every page number and part title in it. */
.page-legal .legal-lede a,
.page-legal .legal-block a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.page-legal .legal-nowrap {
  white-space: nowrap;
}

/* --- Lists --------------------------------------------------------------- */

.page-legal .legal-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.page-legal .legal-list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 22px;
  color: var(--color-default);
  font-size: var(--text-base);
  line-height: 1.65;
}

.page-legal .legal-list li:last-child {
  margin-bottom: 0;
}

/* A dot, not a check mark: a check reads as "included benefit", the wrong
   tone for a list of data a company collects about you. */
.page-legal .legal-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

.page-legal .legal-list--lead li {
  margin-bottom: 12px;
}

/* --- Definitions ---------------------------------------------------------
   Term and definition share one line of flow; the source is written to read
   that way ("Account means a unique account…").
   ------------------------------------------------------------------------ */

.page-legal .legal-defs {
  margin: 0;
}

.page-legal .legal-defs__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.page-legal .legal-defs__item:first-child {
  padding-top: 0;
}

.page-legal .legal-defs__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-legal .legal-defs dt {
  display: inline;
  color: var(--color-heading);
  font-weight: 700;
}

.page-legal .legal-defs dt::after {
  content: " ";
}

.page-legal .legal-defs dd {
  display: inline;
  margin: 0;
  color: var(--color-default);
  line-height: 1.65;
}

/* --- Retention schedule -------------------------------------------------- */

.page-legal .legal-callout {
  margin: 4px 0 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}

.page-legal .legal-callout h5 {
  margin: 0 0 8px;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-legal .legal-callout .legal-list {
  margin-bottom: 0;
}

.page-legal .legal-callout .legal-list + h5 {
  margin-top: 16px;
}

/* --- Numbered clauses ----------------------------------------------------
   The terms cite clauses by number ("1.1", "16.3"), so the number hangs in
   its own column where the eye can find it, and wrapped lines align with
   the text rather than running back under the number.
   ------------------------------------------------------------------------ */

.page-legal .legal-clause {
  display: grid;
  grid-template-columns: 3.1em minmax(0, 1fr);
  column-gap: 8px;
  margin-bottom: 14px;
}

.page-legal .legal-clause:last-child {
  margin-bottom: 0;
}

.page-legal .legal-clause__num {
  padding-top: 0.12em;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.page-legal .legal-clause__body > :last-child {
  margin-bottom: 0;
}

.page-legal .legal-clause__body .legal-list {
  margin-top: 4px;
}

.page-legal .legal-clause__body .legal-defs {
  margin-top: 6px;
}

/* --- Risk notice ----------------------------------------------------------
   The "not a bank" warning at the top of the terms. Set apart so it is read
   before anything else, without the alarm of a red error box.
   ------------------------------------------------------------------------ */

.page-legal .legal-notice {
  display: flex;
  gap: 14px;
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.page-legal .legal-notice__icon {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--color-primary);
  font-size: 18px;
}

.page-legal .legal-lede .legal-notice p {
  color: var(--color-heading);
}

.page-legal .legal-notice strong {
  font-weight: 700;
}

/* --- Contact ------------------------------------------------------------- */

.page-legal .legal-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.page-legal .legal-contact__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--gradient-surface);
}

.page-legal .legal-contact__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 16px;
}

.page-legal .legal-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.page-legal .legal-contact__label {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-legal .legal-contact__text a {
  font-weight: 600;
  text-decoration: none;
}

.page-legal .legal-contact__text a:hover,
.page-legal .legal-contact__text a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   Pager
   ========================================================================== */

.page-legal .legal-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.page-legal .legal-pager a {
  text-decoration: none;
}

.page-legal .legal-pager__step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.page-legal .legal-pager__step--next {
  align-items: flex-end;
  text-align: right;
}

.page-legal a.legal-pager__step:hover,
.page-legal a.legal-pager__step:focus-visible {
  border-color: var(--color-primary-line);
  background: var(--color-primary-soft);
}

.page-legal .legal-pager__step--placeholder {
  visibility: hidden;
}

.page-legal .legal-pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Wraps rather than truncating: on a phone an ellipsis cut the name to
   "Interpretation and De…", hiding the one thing the button is for. */
.page-legal .legal-pager__name {
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.page-legal .legal-pager__pages {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-legal .legal-pager__page {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.page-legal a.legal-pager__page:hover,
.page-legal a.legal-pager__page:focus-visible {
  border-color: var(--color-border-strong);
  color: var(--color-heading);
}

.page-legal .legal-pager__page.is-current {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* ==========================================================================
   Print — the document only
   ========================================================================== */

@media print {
  .page-legal .legal-sidebar,
  .page-legal .legal-pager,
  .page-legal .legal-progress {
    display: none;
  }

  .page-legal .legal-layout {
    display: block;
  }

  .page-legal .legal-body {
    max-width: none;
  }
}

/* ==========================================================================
   Tablet and below
   ========================================================================== */

@media (max-width: 991px) {
  .page-legal .legal-layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .page-legal .legal-sidebar {
    position: static;
  }

  .page-legal .legal-body {
    max-width: none;
  }

  /* The contents become a single bar. Closed, it is one line tall. */
  .page-legal .legal-toc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--gradient-surface);
  }

  .page-legal .legal-toc__summary {
    padding: 14px 16px;
    -webkit-tap-highlight-color: transparent;
  }

  .page-legal .legal-toc[open] .legal-toc__summary {
    border-bottom: 1px solid var(--color-border);
  }

  .page-legal .legal-toc__panel {
    padding: 8px 16px 16px;
  }
}

@media (max-width: 767px) {
  .page-legal .legal-meta {
    margin-bottom: 18px;
    font-size: var(--text-xs);
  }

  .page-legal .legal-lede {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
  }

  .page-legal .legal-lede p,
  .page-legal .legal-block p,
  .page-legal .legal-list li {
    font-size: var(--text-sm);
  }

  .page-legal .legal-part__title {
    font-size: var(--text-xl);
  }

  .page-legal .legal-block + .legal-block {
    margin-top: 22px;
    padding-top: 20px;
  }

  .page-legal .legal-block h3 {
    font-size: var(--text-lg);
  }

  .page-legal .legal-block h4 {
    margin-top: 18px;
    font-size: var(--text-base);
  }

  /* The four web addresses in the definitions must be allowed to wrap on a
     phone, or the longest overflows a 320px screen. */
  .page-legal .legal-nowrap {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-legal .legal-callout {
    padding: 14px 14px 14px 16px;
  }

  .page-legal .legal-clause {
    grid-template-columns: 2.9em minmax(0, 1fr);
    column-gap: 4px;
  }

  .page-legal .legal-clause__num {
    font-size: var(--text-xs);
  }

  .page-legal .legal-notice {
    gap: 10px;
    padding: 14px;
  }

  .page-legal .legal-contact__item {
    padding: 14px;
  }

  /* Page numbers across the top, previous and next side by side beneath. */
  .page-legal .legal-pager {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
  }

  .page-legal .legal-pager__pages {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: center;
  }

  .page-legal .legal-pager__step {
    padding: 11px 12px;
  }

  .page-legal .legal-pager__name {
    font-size: var(--text-xs);
  }
}

@media (max-width: 359px) {
  .page-legal .legal-pager__pages {
    gap: 2px;
  }

  .page-legal .legal-pager__page {
    width: 30px;
    height: 30px;
  }
}