/* ============================================================
   Xycora public site: the inner pages (contact, pricing, security,
   roadmap, about, terms, privacy, DPA), the user guide's ground, and
   the bare auth pages (join, forgot and reset password, portal terms).

   Loaded after site.css and written against its tokens. Every rule is
   scoped to an "xp-" class or to a page body class, so nothing here
   touches the chrome, the homepage or the Product page.

   Mobile first (prompt 034): a rule with no media query is the phone
   rule; the 600, 900 and 1200 px blocks at the end add the larger
   layouts. On a phone the fields are 16 px (no zoom on iPhone), every
   control keeps a 44 px touch area, and the legal pages' contents open
   as a sheet.
   ============================================================ */

/* Links with no class take the site-wide hairline underline from site.css;
   nothing here adds a second line under them. */

/* ── Fields: dark, 1 px border, inner shadow, 44 px, a glow on focus ──── */
.xp-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.xp-label { font-size: 13px; font-weight: 500; color: var(--xs-t2); }
.xp-label .xp-optional { margin-left: 6px; font-weight: 400; color: var(--xs-t4); }
.xp-input, .xp-select, .xp-textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--xs-t1);
  font: 16px/1.3 var(--xs-sans);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  outline: none;
  color-scheme: dark;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.xp-input::placeholder, .xp-textarea::placeholder { color: var(--xs-t4); }
.xp-input:hover, .xp-select:hover, .xp-textarea:hover { border-color: rgba(255, 255, 255, 0.18); }
.xp-input:focus, .xp-select:focus, .xp-textarea:focus {
  border-color: rgba(var(--xs-ice-rgb), 0.7);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(var(--xs-ice-rgb), 0.16);
}
.xp-input[aria-invalid="true"], .xp-textarea[aria-invalid="true"] { border-color: #D98A8A; }
.xp-textarea { height: auto; min-height: 132px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.xp-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238FA1B3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5 6 7.5l3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.xp-select option { background: #0D1927; color: var(--xs-t1); }
.xp-error { margin: 0; font-size: 13px; line-height: 1.4; color: #F2C4C4; }
.xp-error[hidden] { display: none; }
.xp-hint { margin: 0; font-size: 13px; color: var(--xs-t4); }
.xp-alert {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(217, 138, 138, 0.3);
  background: rgba(217, 138, 138, 0.1);
  color: #F2C4C4;
  font-size: 13.5px;
  line-height: 1.45;
}
.xp-alert[hidden] { display: none; }

/* ── A quiet card: the form on Contact, the Theo line on About ────────── */
.xp-card {
  position: relative;
  padding: 30px 22px 28px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 70px 140px -50px rgba(0, 0, 0, 0.85),
    0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.xp-contact { position: relative; padding: 0 0 88px; }
/* On a phone the form is not boxed: a hairline above it, the full width
   for its fields. */
.xp-contact .xp-card { padding: 28px 0 0; border-width: 1px 0 0; border-radius: 0; background: none; box-shadow: none; }
.xp-contact .xs-pool--ice { width: 1100px; height: 900px; right: -420px; top: -200px; }
.xp-contact .xs-pool--warm { width: 700px; height: 600px; left: -260px; bottom: -120px; }
.xp-contact__grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.xp-contact__aside { padding-top: 12px; order: 2; }
.xp-steps { display: grid; gap: 36px; margin: 32px 0 0; padding: 0; list-style: none; }
.xp-step { position: relative; padding-top: 22px; }
.xp-step::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; border-radius: 2px; background: var(--xs-ice); }
.xp-step h3 { font-family: var(--xs-serif); font-size: 22px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xp-step p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--xs-t3); max-width: 380px; }
.xp-reach { margin-top: 48px; }
.xp-reach dl { margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xp-reach div { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-reach dt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--xs-t3); }
.xp-reach dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--xs-t1); }
.xp-reach dd a { color: var(--xs-t1); }
.xp-reach dd a:hover { color: var(--xs-ice); }
.xp-reach dd small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--xs-t3); }
.xp-form__head { margin-bottom: 32px; }
.xp-form__head h2 { font-family: var(--xs-serif); font-size: 26px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xp-form__head p { margin-top: 8px; font-size: 15px; color: var(--xs-t3); }
.xp-fields { display: grid; grid-template-columns: 1fr; gap: 18px; }
.xp-fields__full { grid-column: 1 / -1; }
.xp-form__foot { margin-top: 30px; }
.xp-form__foot .xs-btn { width: 100%; }
.xp-form__foot .xs-btn[disabled] { opacity: 0.7; cursor: default; }
.xp-form__privacy { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--xs-t4); text-align: center; }
.xp-form__privacy a { color: var(--xs-t3); }
.xp-form__privacy a:hover { color: var(--xs-t1); }
.xp-success { text-align: center; padding: 16px 0 8px; }
.xp-success[hidden] { display: none; }
.xp-success:focus { outline: none; }
.xp-success__icon {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 24px;
  border-radius: 50%;
  border: 1px solid rgba(var(--xs-ice-rgb), 0.45);
  background: rgba(var(--xs-ice-rgb), 0.08);
  color: var(--xs-ice);
}
.xp-success__icon svg { width: 24px; height: 24px; }
.xp-success h2 { font-family: var(--xs-serif); font-size: 28px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xp-success p { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--xs-t3); }
.xp-success p strong { font-weight: 600; color: var(--xs-t1); }
.xp-success p a { color: var(--xs-t1); }
.xp-success .xs-btn { margin-top: 28px; }

/* ── Pricing ──────────────────────────────────────────────────────────── */
.xp-includes { position: relative; padding: 16px 0 72px; }
.xp-includes .xs-pool--ice { width: 1200px; height: 900px; left: -480px; top: -200px; }
.xp-includes__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.xp-tile {
  display: block;
  padding: 26px 26px 24px;
  border-radius: 18px;
  border: 1px solid var(--xs-line);
  background: var(--xs-card);
  box-shadow: inset 0 1px 0 var(--xs-line-hi);
  transition: background 140ms ease, border-color 140ms ease;
}
a.xp-tile:hover { background: rgba(255, 255, 255, 0.055); border-color: var(--xs-line-hi); }
.xp-tile b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--xs-t1); }
.xp-tile span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--xs-t3); }
.xp-includes__note { margin-top: 36px; font-size: 16px; color: var(--xs-t3); max-width: 720px; }
.xp-includes__note b { font-weight: 600; color: var(--xs-t2); }

/* ── Security: one calm column, large quiet numbers ───────────────────── */
.xp-sec { position: relative; padding: 20px 0 72px; }
.xp-sec .xs-pool--ice { width: 1200px; height: 1000px; right: -500px; top: 200px; }
.xp-sec .xs-pool--warm { width: 700px; height: 700px; left: -300px; top: 1400px; }
.xp-sec__list { max-width: 900px; margin: 0; padding: 0; list-style: none; }
.xp-sec__item { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 36px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xp-sec__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-sec__n {
  font-size: 40px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.13);
  padding-top: 4px;
}
.xp-sec__item h2 { font-family: var(--xs-serif); font-size: 26px; font-weight: 450; letter-spacing: -0.01em; line-height: 1.1; color: var(--xs-t1); }
.xp-sec__item p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--xs-t3); max-width: 640px; }
.xp-sec__item p + p { margin-top: 12px; }
.xp-sec__item p a { color: var(--xs-t1); }

/* ── Closing band: one line and the demo button ───────────────────────── */
.xp-close { position: relative; padding: 0 0 88px; text-align: center; }
.xp-close h2 { font-size: 28px; max-width: 760px; margin: 0 auto; }
.xp-close .xs-lead { max-width: 560px; margin: 18px auto 0; }
.xp-close .xs-btn { margin-top: 36px; }

/* ── Roadmap ──────────────────────────────────────────────────────────── */
.xp-today { position: relative; padding: 20px 0 56px; }
.xp-today__list { max-width: 900px; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xp-today__list li { display: grid; grid-template-columns: 1fr; gap: 0; padding: 6px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-today__list a { display: flex; align-items: center; justify-self: start; min-height: 44px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--xs-t1); }
.xp-today__list a:hover { color: var(--xs-ice); }
.xp-today__list span { font-size: 16px; line-height: 1.5; color: var(--xs-t3); }
.xp-next { position: relative; padding: 64px 0; }
.xp-next .xs-pool--ice { width: 1200px; height: 1000px; left: -460px; top: -100px; }
.xp-next .xs-pool--warm { width: 700px; height: 700px; right: -260px; bottom: -200px; }
/* The list sits well clear of the heading (030). */
.xp-next .xs-head { margin-bottom: 40px; }
.xp-next__list { max-width: 980px; margin: 0; padding: 0; list-style: none; }
.xp-next__item { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xp-next__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-next__item h3 { font-family: var(--xs-serif); font-size: 26px; font-weight: 450; letter-spacing: -0.01em; line-height: 1.1; color: var(--xs-t1); }
.xp-next__tag { margin-top: 12px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--xs-t2); }
.xp-next__item p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--xs-t3); max-width: 600px; }
.xp-next__side { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 0; }
.xp-vote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  border: 1px solid var(--xs-line-hi);
  background: var(--xs-card);
  color: var(--xs-t2);
  font: 500 14px/1 var(--xs-sans);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--xs-line-hi);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.xp-vote svg { width: 18px; height: 18px; flex: none; }
.xp-vote:hover { background: rgba(255, 255, 255, 0.06); color: var(--xs-t1); }
.xp-vote:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 3px; }
.xp-vote.is-voted { border-color: rgba(var(--xs-ice-rgb), 0.5); background: rgba(var(--xs-ice-rgb), 0.08); color: var(--xs-ice); cursor: default; }
.xp-vote__count { min-width: 1.2em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--xs-t1); }
.xp-vote.is-voted .xp-vote__count { color: var(--xs-ice); }

/* ── About ────────────────────────────────────────────────────────────── */
.xp-vision { position: relative; padding: 20px 0 72px; }
.xp-vision .xs-pool--ice { width: 1200px; height: 900px; right: -420px; top: -300px; }
.xp-vision__text { max-width: 900px; font-size: 22px; line-height: 1.38; letter-spacing: -0.018em; color: var(--xs-t3); text-wrap: pretty; }
.xp-vision__text b { font-weight: 600; color: var(--xs-t1); }
.xp-vision__text + .xp-vision__text { margin-top: 28px; }
.xp-theo { padding: 0 0 88px; }
.xp-theo .xp-card { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; max-width: 820px; padding: 24px 22px; border-style: dashed; border-color: rgba(var(--xs-ice-rgb), 0.42); background: rgba(var(--xs-ice-rgb), 0.03); box-shadow: none; }
.xp-theo b { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--xs-ice); white-space: nowrap; }
.xp-theo p { font-size: 18px; line-height: 1.5; color: var(--xs-t2); }

/* ── Legal documents: a rail and one reading column ──────────────────── */
.xp-legal { position: relative; padding: 8px 0 72px; }
/* The phone's contents sheet sits above the header and the footer: this
   column does not make its own stacking layer until the rail returns. */
.xp-legal > .xs-wrap { z-index: auto; }
.xp-legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.xp-legal__rail { position: static; }
.xp-legal__rail::-webkit-scrollbar { display: none; }
.xp-legal__title { display: block; margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--xs-t4); }
/* The three documents: one row of 44 px tabs on a phone (short names under
   600 px), the rail's list from 900 px. */
.xp-legal__switch { display: flex; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--xs-line); overflow-x: auto; scrollbar-width: none; }
.xp-legal__switch::-webkit-scrollbar { display: none; }
.xp-legal__switch .xp-legal__title { display: none; }
.xp-legal__switch a { position: relative; display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; font-weight: 500; color: var(--xs-t3); }
.xp-legal__switch a:first-of-type { padding-left: 0; }
.xp-legal__switch a:hover { color: var(--xs-t1); }
.xp-legal__switch a[aria-current="page"] { color: var(--xs-t1); }
/* The current document: an ice rule under its name only */
.xp-legal__switch a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--xs-ice); }
.xp-legal__switch a[aria-current="page"]:first-of-type::after { left: 0; }
.xp-legal__switch .xp-long { display: none; }
/* Contents: a 48 px "Contents" bar that opens a sheet from the bottom. */
.legal-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--xs-line);
  border-radius: 12px;
  background: var(--xs-card);
  font-size: 15px;
  font-weight: 500;
  color: var(--xs-t1);
  cursor: pointer;
  list-style: none;
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 2px; }
.legal-toc > summary svg { width: 16px; height: 16px; color: var(--xs-t3); transform: rotate(180deg); }
.legal-toc:not([open]) > nav { display: none; }
.legal-toc[open]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 8, 13, 0.62);
}
.legal-toc[open] > nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 91;
  max-height: min(78dvh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--xs-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--xs-line-hi);
  border-radius: 20px 20px 0 0;
  background: #0C1622;
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.9);
  animation: xp-sheet-in 220ms ease-out;
}
@keyframes xp-sheet-in { from { transform: translateY(24px); opacity: 0; } }
.xp-sheet__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  background: #0C1622;
}
.xp-sheet__head .xp-legal__title { margin: 0; font-size: 16px; letter-spacing: -0.01em; text-transform: none; color: var(--xs-t1); }
.xp-sheet__close {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--xs-t3);
  cursor: pointer;
}
.xp-sheet__close:hover { color: var(--xs-t1); background: rgba(255, 255, 255, 0.05); }
.xp-sheet__close:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: -4px; }
.xp-sheet__close svg { width: 18px; height: 18px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
/* Tabs and sheet rows carry no underline on a phone (the rail keeps it). */
.xs-page main .xp-legal__switch a, .xs-page main .legal-toc a { text-decoration-line: none; }
.legal-toc a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 15px; line-height: 1.4; color: var(--xs-t3); transition: color 120ms ease; }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--xs-t1); }
.legal-toc__num { flex: none; min-width: 22px; font-variant-numeric: tabular-nums; color: var(--xs-t4); }
.legal-toc a.is-active .legal-toc__num { color: var(--xs-ice); }
.xp-doc { max-width: 720px; }
.xp-doc section { padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); scroll-margin-top: calc(var(--xs-header-h) + 24px); }
.xp-doc section:first-child { padding-top: 8px; border-top: 0; }
.xp-doc h2 { display: flex; gap: 12px; align-items: baseline; font-family: var(--xs-serif); font-size: 24px; font-weight: 450; letter-spacing: -0.01em; line-height: 1.15; color: var(--xs-t1); }
.legal-num { flex: none; min-width: 30px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--xs-t4); }
.xp-doc p, .xp-doc li { font-size: 16px; line-height: 1.65; color: var(--xs-t3); }
.xp-doc p { margin-top: 16px; }
.xp-doc ul { margin: 16px 0 0; padding-left: 20px; }
.xp-doc li + li { margin-top: 10px; }
.xp-doc strong { font-weight: 600; color: var(--xs-t2); }
.xp-doc a { color: var(--xs-t1); }
.xp-measures { counter-reset: xp-measure; margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xp-measures li { counter-increment: xp-measure; display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-measures li::before { content: counter(xp-measure, decimal-leading-zero); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--xs-t4); padding-top: 3px; }
.xp-legal__meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 28px; font-size: 14px; color: var(--xs-t3); }
.xp-legal__meta b { font-weight: 600; color: var(--xs-t2); }
.xp-legal__meta a { color: var(--xs-t2); }
.xp-footnote { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13.5px; line-height: 1.5; color: var(--xs-t4); }
.xp-footnote a { color: var(--xs-t3); }

/* Sub-processor tables: a card list on phones, a table from 900 px */
.xp-table-wrap { margin-top: 22px; }
.xp-table { display: block; width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.xp-table thead { display: none; }
.xp-table tbody, .xp-table tr, .xp-table td { display: block; width: 100%; }
.xp-table th { padding: 0 16px 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--xs-t4); }
.xp-table tr { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xp-table td { padding: 6px 0; vertical-align: top; color: var(--xs-t3); }
.xp-table td:first-child { padding-top: 0; font-size: 16px; color: var(--xs-t1); font-weight: 500; }
.xp-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--xs-t4); }
.xp-table td:first-child::before { display: none; }
.xp-table a { overflow-wrap: anywhere; }

/* ── The user guide: its ground follows the palette ───────────────────── */
/* Only in the night edition (the default): a reader who chose the light
   theme in the workspace gets the guide's own ivory, with the site's dark
   header and footer around it, rather than dark ink on this dark ground. */
:root[data-theme="dark"] body.ug-body { background: linear-gradient(180deg, var(--xs-bg0) 0%, var(--xs-bg1) 46%, var(--xs-bg2) 100%); }
:root[data-theme="dark"] body.ug-body .ug-hero { border-bottom-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] body.ug-body .ug-section, :root[data-theme="dark"] body.ug-body .ug-nav__list, :root[data-theme="dark"] body.ug-body .ug-nav__list a, :root[data-theme="dark"] body.ug-body .ug-steps, :root[data-theme="dark"] body.ug-body .ug-steps > li { border-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] body.ug-body .ug-side { background: rgba(7, 12, 18, 0.96); border-bottom-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] body.ug-body .ug-toc[open] > .ug-toc__panel, :root[data-theme="dark"] body.ug-body .ug-sheet__head { background: #0C1622; }

/* ── The bare auth pages: join, forgot and reset password ─────────────── */
body.lg-body {
  background: linear-gradient(180deg, var(--xs-bg0) 0%, var(--xs-bg1) 60%, var(--xs-bg2) 100%);
  color: var(--xs-t2);
  font-family: var(--xs-sans);
  -webkit-font-smoothing: antialiased;
}
body.lg-body .au-side { background: transparent; border-right: 1px solid rgba(255, 255, 255, 0.06); }
body.lg-body .au-main { background: transparent; }
body.lg-body .lg-card__brand { display: none; }
body.lg-body .lg-card__heading h1 { font-family: var(--xs-serif); font-size: 36px; font-weight: 450; letter-spacing: -0.012em; line-height: 1.08; color: var(--xs-t1); }
body.lg-body .lg-card__heading p { color: var(--xs-t3); font-size: 15.5px; line-height: 1.5; }
body.lg-body .lg-field label { color: var(--xs-t2); font-size: 13px; font-weight: 500; }
body.lg-body .lg-field input {
  height: 48px;
  font-size: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--xs-t1);
  font-family: var(--xs-sans);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color-scheme: dark;
}
body.lg-body .lg-field input::placeholder { color: var(--xs-t4); }
body.lg-body .lg-field input:hover { border-color: rgba(255, 255, 255, 0.18); }
body.lg-body .lg-field input:focus { border-color: rgba(var(--xs-ice-rgb), 0.7); background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38), 0 0 0 3px rgba(var(--xs-ice-rgb), 0.16); }
body.lg-body .lg-field input[aria-invalid="true"], body.lg-body .lg-field input.is-invalid { border-color: #D98A8A; }
body.lg-body .lg-field input[readonly] { background: rgba(255, 255, 255, 0.02); color: var(--xs-t3); }
body.lg-body .lg-field input[readonly]:focus { border-color: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.38); }
body.lg-body .lg-field__pw-wrap input { padding-right: 52px; }
body.lg-body .lg-field__toggle { width: 44px; height: 44px; right: 2px; color: var(--xs-t3); background: none; }
body.lg-body .lg-field__toggle:hover { color: var(--xs-t1); background: rgba(255, 255, 255, 0.05); }
body.lg-body .lg-hint, body.lg-body .lg-help, body.lg-body .lg-card__footer { color: var(--xs-t4); }
body.lg-body .lg-card__footer { border-top-color: rgba(255, 255, 255, 0.08); }
body.lg-body .lg-card__footer a, body.lg-body .lg-link, body.lg-body .lg-help a { color: var(--xs-t2); border-bottom-color: rgba(255, 255, 255, 0.2); }
body.lg-body .lg-card__footer a:hover, body.lg-body .lg-link:hover, body.lg-body .lg-help a:hover { color: var(--xs-t1); border-bottom-color: var(--xs-ice); }
body.lg-body .lg-rules li { color: var(--xs-t4); }
body.lg-body .lg-rules li::before { border-color: rgba(255, 255, 255, 0.3); }
body.lg-body .lg-rules li.is-met { color: var(--xs-t2); }
body.lg-body .lg-rules li.is-met::before { background: var(--xs-ice); border: 0; }
body.lg-body .lg-error { border-color: rgba(217, 138, 138, 0.3); background: rgba(217, 138, 138, 0.1); color: #F2C4C4; border-radius: 10px; }
body.lg-body .lg-submit {
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: #EEF1F0;
  color: #06111D;
  font-family: var(--xs-sans);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 36px -12px rgba(238, 241, 240, 0.28), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background 140ms ease;
}
body.lg-body .lg-submit:hover:not(:disabled) { background: #FFFFFF; color: #06111D; border-color: transparent; }
body.lg-body .lg-submit:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 3px; box-shadow: none; }
body.lg-body .lg-submit__spinner { border-color: rgba(6, 17, 29, 0.25); border-top-color: #06111D; }
body.lg-body .btn--ghost { height: 50px; border: 1px solid var(--xs-line-hi); border-radius: 999px; background: transparent; color: var(--xs-t2); font-family: var(--xs-sans); font-size: 15px; font-weight: 500; cursor: pointer; }
body.lg-body .btn--ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--xs-t1); }
body.lg-body .lg-state-icon { border-color: rgba(var(--xs-ice-rgb), 0.45); background: rgba(var(--xs-ice-rgb), 0.08); color: var(--xs-ice); }
body.lg-body .lg-state-icon--warn { color: #E7C98A; border-color: rgba(231, 201, 138, 0.4); background: rgba(231, 201, 138, 0.08); }
body.lg-body .lg-state-icon--info { color: var(--xs-ice); }
body.lg-body .lg-loading { color: var(--xs-t3); }
body.lg-body .lg-loading__spinner { border-color: rgba(255, 255, 255, 0.15); border-top-color: var(--xs-t1); }
body.lg-body .au-foot { color: var(--xs-t4); }
body.lg-body .au-foot a { color: var(--xs-t3); }
body.lg-body .au-foot a:hover { color: var(--xs-t1); }

/* ── The client portal's terms page: the same ground, through its tokens ─ */
body.xp-portal-terms {
  --surface-canvas: #070C12;
  --surface-elevated: #0D1927;
  --surface-recessed: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --text-primary: #FFFFFF;
  --text-secondary: #E6EDF3;
  --text-muted: #8FA1B3;
  --text-faint: #5E7085;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.2);
  --status-warning: #C9B37E;
  --status-warning-soft: rgba(201, 179, 126, 0.1);
  background: linear-gradient(180deg, #070C12 0%, #0C1722 60%, #080E14 100%);
  color: #E6EDF3;
}
body.xp-portal-terms .cp-card { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.03); }
body.xp-portal-terms .cp-top { background: rgba(7, 12, 18, 0.9); }
/* The mark sits straight on this dark ground in both themes, with no tile
   and a faint glow (owner, 14 Oct), never recoloured; the wordmark stays light. */
:root body.xp-portal-terms .xy-logo .xy-logo__mark { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.16)); }
body.xp-portal-terms .cp-top .xy-logo { color: #F3FAFF; }

/* ── The client portal's terms page on a phone: 44 px targets, no text
   under 13 px except the uppercase badge and wordmark ───────────────── */
body.xp-portal-terms .cp-brand { min-height: 44px; }
body.xp-portal-terms .cp-back { min-height: 44px; }
body.xp-portal-terms .cp-draft__badge { font-size: 11px; text-transform: uppercase; }
body.xp-portal-terms .cp-brand__label { font-size: 11px; }
body.xp-portal-terms .cp-foot { font-size: 13px; }
body.xp-portal-terms .cp-foot__powered .xy-logo__word { font-size: 11px; }

/* ── Larger screens ─────────────────────────────────────────────────── */

/* Large phones and small tablets */
@media (min-width: 600px) {
  .xp-contact { padding-bottom: 120px; }
  .xp-contact .xp-card {
    padding: 30px 22px 28px;
    border-width: 1px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.018) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 70px 140px -50px rgba(0, 0, 0, 0.85),
      0 30px 60px -30px rgba(0, 0, 0, 0.7);
  }
  .xp-contact__grid { gap: 56px; }
  .xp-step h3 { font-size: 22px; }
  .xp-form__head h2 { font-size: 28px; }
  .xp-includes { padding: 20px 0 100px; }
  .xp-sec { padding-bottom: 110px; }
  .xp-sec__item { gap: 14px; padding: 44px 0; }
  .xp-sec__item h2 { font-size: 27px; }
  .xp-close { padding-bottom: 130px; }
  .xp-close h2 { font-size: 32px; }
  .xp-today { padding-bottom: 80px; }
  .xp-next { padding: 90px 0; }
  .xp-next .xs-head { margin-bottom: 48px; }
  .xp-next__item { padding: 36px 0; }
  .xp-next__item h3 { font-size: 26px; }
  .xp-vision { padding-bottom: 100px; }
  .xp-theo { padding-bottom: 110px; }
  .xp-legal { padding: 20px 0 110px; }
  .xp-legal__grid { gap: 32px; }
  .xp-legal__switch .xp-long { display: inline; }
  .xp-legal__switch .xp-short { display: none; }
  .legal-toc[open] > nav { max-width: 560px; margin: 0 auto; }
}

/* Tablets and up: two columns, the legal rail, the tables */
@media (min-width: 900px) {
  .xp-input, .xp-select, .xp-textarea { height: 44px; font-size: 15px; }
  .xp-textarea { height: auto; }
  .xp-hint { font-size: 12.5px; }
  .xp-card { padding: 44px 44px 40px; border-radius: 24px; }
  .xp-contact { padding-bottom: 200px; }
  .xp-contact .xp-card { padding: 44px 44px 40px; border-radius: 24px; }
  .xp-contact__grid { grid-template-columns: 0.8fr 1.2fr; }
  .xp-contact__aside { order: 0; }
  .xp-fields { grid-template-columns: 1fr 1fr; gap: 22px 20px; }
  .xp-reach { margin-top: 72px; }
  .xp-reach div { grid-template-columns: 150px 1fr; gap: 16px; }

  .xp-includes { padding: 40px 0 140px; }
  .xp-includes__grid { grid-template-columns: 1fr 1fr; margin-top: 64px; }

  .xp-sec { padding-bottom: 160px; }
  .xp-sec__item { grid-template-columns: 140px 1fr; gap: 32px; padding: 64px 0; }
  .xp-sec__n { font-size: 60px; }
  .xp-sec__item h2 { font-size: 32px; }
  .xp-sec__item p { font-size: 18px; }

  .xp-close { padding-bottom: 200px; }
  .xp-close h2 { font-size: 38px; }

  .xp-today { padding-bottom: 110px; }
  .xp-today__list { margin-top: 48px; }
  .xp-today__list li { grid-template-columns: 250px 1fr; gap: 12px 24px; padding: 18px 0; }
  .xp-today__list a { display: block; min-height: 0; justify-self: stretch; }
  .xp-next { padding: 140px 0 120px; }
  .xp-next .xs-head { margin-bottom: 80px; }
  .xp-next__item { grid-template-columns: 1fr auto; gap: 24px 56px; padding: 52px 0; }
  .xp-next__item h3 { font-size: 32px; }
  .xp-next__tag { font-size: 20px; }
  .xp-next__side { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: normal; gap: 18px; padding-top: 6px; }

  .xp-vision { padding-bottom: 140px; }
  .xp-vision__text { font-size: 26px; }
  .xp-theo { padding-bottom: 160px; }
  .xp-theo .xp-card { grid-template-columns: auto 1fr; gap: 28px; padding: 32px 40px; }

  /* Legal: the rail with the documents and an always-open contents list */
  .xp-legal { padding: 20px 0 160px; }
  .xp-legal > .xs-wrap { z-index: 1; }
  .xp-legal__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .xp-legal__rail { position: sticky; top: calc(var(--xs-header-h) + 28px); max-height: calc(100vh - var(--xs-header-h) - 56px); overflow-y: auto; scrollbar-width: none; }
  .xp-legal__switch { display: grid; gap: 2px; margin: 0 0 40px; border-bottom: 0; overflow: visible; }
  .xp-legal__switch .xp-legal__title { display: block; }
  .xp-legal__switch a { display: block; min-height: 0; margin-bottom: 0; padding: 10px 12px; border-bottom: 0; border-radius: 10px; }
  .xp-legal__switch a:first-of-type { padding-left: 12px; }
  .xp-legal__switch a[aria-current="page"] { background: rgba(255, 255, 255, 0.05); }
  .xp-legal__switch a[aria-current="page"]::after { content: none; }
  .legal-toc > summary { display: none; }
  .legal-toc[open]::before { content: none; }
  .legal-toc[open] > nav {
    position: static;
    max-width: none;
    margin: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 0;
    border-top: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
  }
  .xp-sheet__head { position: static; display: block; min-height: 0; background: none; }
  .xp-sheet__head .xp-legal__title { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--xs-t4); }
  .xp-sheet__close { display: none; }
  .legal-toc a { align-items: normal; min-height: 0; padding: 9px 0; font-size: 13.5px; }
  .xs-page main .xp-legal__switch a:not([class]), .xs-page main .legal-toc a:not([class]) { text-decoration-line: underline; }

  .xp-doc section { padding: 44px 0; }
  .xp-doc h2 { gap: 18px; font-size: 26px; }
  .xp-doc p, .xp-doc li { font-size: 16.5px; }

  .xp-table { display: table; }
  .xp-table thead { display: table-header-group; }
  .xp-table tbody { display: table-row-group; width: auto; }
  .xp-table tr { display: table-row; width: auto; padding: 0; border-bottom: 0; }
  .xp-table td { display: table-cell; width: auto; padding: 14px 16px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .xp-table td:first-child { padding-top: 14px; font-size: inherit; white-space: nowrap; }
  .xp-table th:last-child, .xp-table td:last-child { padding-right: 0; }
  .xp-table td::before { content: none; }

  :root[data-theme="dark"] body.ug-body .ug-side { background: none; }
  :root[data-theme="dark"] body.ug-body .ug-toc[open] > .ug-toc__panel, :root[data-theme="dark"] body.ug-body .ug-sheet__head { background: none; }

  body.lg-body .lg-field input { height: 44px; font-size: 15px; }
  body.lg-body .lg-field__toggle { width: 36px; right: 6px; }

  body.xp-portal-terms .cp-brand { min-height: auto; }
  body.xp-portal-terms .cp-back { min-height: 32px; }
  body.xp-portal-terms .cp-draft__badge { font-size: 10.5px; }
  body.xp-portal-terms .cp-brand__label { font-size: 10.5px; }
  body.xp-portal-terms .cp-foot { font-size: 12.5px; }
  body.xp-portal-terms .cp-foot__powered .xy-logo__word { font-size: 10.5px; }
}

/* Desktop: the full measures */
@media (min-width: 1200px) {
  .xp-contact__grid { gap: 96px; }
  .xp-includes__grid { grid-template-columns: repeat(3, 1fr); }
  .xp-vision__text { font-size: 30px; }
  .xp-close h2 { font-size: 44px; }
  .xp-legal__grid { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-toc[open] > nav { animation: none; }
}