/* ============================================================
   site-pages.css - the inner pages of the public site, in the
   revamp's glass and metal (owner, 25 Oct 2026)
   About, Contact, Roadmap, the user guide, the legal documents
   (terms, privacy, dpa), the French page, the bare sign-in pages
   (join, forgot and reset password) and the client portal's terms.
   Loaded after styles/site.css (the theme: tokens, the chrome, the
   buttons, the dialogs) and drawn with its tokens only. The pages
   keep their markup and words; this sheet gives their classes the
   new look: the studio ground, graphite ink for the headlines,
   frosted glass for cards and sheets, field wells, brushed metal for
   the quiet controls and graphite for the one primary action.

   Mobile first (api/tests/test_css_mobile_first.py): a rule with no
   media query is the phone's; larger screens add to it at 600, 900
   and 1200 px only.
   ============================================================ */

/* The page's own names for the palette, from before the revamp, now
   pointing at the theme (site.css) */
:root {
  --xs-t1: var(--label);
  --xs-t2: var(--label);
  --xs-t3: var(--label-2);
  --xs-t4: var(--label-3);
  --xs-line: var(--hair);
  --xs-line-hi: var(--hair-strong);
  --xs-sans: var(--font);
  --xs-header-h: calc(var(--nav-h) + 12px);
}

/* Anchors land below the floating navigation */
html { scroll-padding-top: calc(var(--nav-h) + 36px); }

/* ── The page ─────────────────────────────────────────────────────── */
body.xs-page { overflow-x: hidden; }
:where(body.xs-page) :where(h1, h2, h3, h4, p, dl, dd) { margin: 0; }
.xs-shell { position: relative; overflow-x: clip; }
.xs-wrap { position: relative; z-index: 1; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* the old ice and warm light pools give way to the studio ground */
.xs-pool { display: none; }

/* ── Type ─────────────────────────────────────────────────────────── */
.xs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label-3);
  background: none;
  -webkit-text-fill-color: var(--label-3);
}
.xs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge); }
.xs-h1-eyebrow > .xs-eyebrow { display: flex; width: fit-content; margin: 0 0 18px; line-height: 1.2; font-size: 12px; letter-spacing: 0.16em; }
/* in a centred hero (the French page) the words centre and the dot rides the first line */
.xs-hero:not(.xs-hero--page) .xs-h1-eyebrow > .xs-eyebrow { display: block; width: auto; margin: 0 auto 18px; }
.xs-hero:not(.xs-hero--page) .xs-h1-eyebrow > .xs-eyebrow::before { display: inline-block; margin-right: 10px; vertical-align: 0.1em; }
.xs-display {
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--label);
  background: var(--ink-display);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.05em;
  text-wrap: balance;
}
@media (forced-colors: active) { .xs-display { background: none; -webkit-text-fill-color: CanvasText; } }
.xs-lead { font-size: 17px; line-height: 1.55; color: var(--label-2); letter-spacing: -0.005em; }
.xs-body { font-size: 16px; line-height: 1.6; color: var(--label-2); }

/* Links in running text: a hairline underline that darkens on hover */
.xs-page main a:not([class]),
body:not(.xs-page) main a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(0, 0, 0, 0.28);
  transition: color 300ms ease, text-decoration-color 300ms ease;
}
.xs-page main a:not([class]):hover,
body:not(.xs-page) main a:not([class]):hover { color: var(--label); text-decoration-color: var(--label); }

/* ── The one primary action: graphite, with the band of light ──────── */
.xs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--graphite);
  box-shadow: var(--graphite-edge);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: background 420ms ease, box-shadow 420ms ease;
}
body.xs-page a.xs-btn, .xs-btn, .xs-btn:hover { color: #FFFFFF; }
.xs-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.xs-btn:hover { background: var(--graphite-hover); box-shadow: var(--graphite-edge), 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.7); }
.xs-btn:hover::after { animation: shine 1400ms var(--ease-soft) 1; }
.xs-btn[disabled] { opacity: 0.7; cursor: default; }

/* ── The hero of an inner page ────────────────────────────────────── */
.xs-hero { position: relative; padding: calc(var(--nav-h) + 64px) 0 48px; text-align: center; }
.xs-hero--page { text-align: left; padding-bottom: 40px; }
.xs-hero h1 { font-size: clamp(36px, 10vw, 46px); max-width: 1100px; margin: 0 auto; }
.xs-hero--page h1 { font-size: clamp(36px, 10vw, 44px); max-width: 15em; margin: 18px 0 0; }
.xs-hero--page h1.xs-h1-eyebrow { margin-top: 0; }
.xs-hero--page .xs-lead { margin-top: 20px; max-width: 34em; font-size: 18px; }
/* the mark above the motto (the French page): the logo on a soft light */
.xs-mark { position: relative; width: 56px; height: 56px; margin: 0 auto 32px; }
.xs-mark::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
.xs-mark img { position: relative; width: 56px; height: 56px; filter: drop-shadow(0 1px 1px rgba(10, 37, 54, 0.3)) drop-shadow(0 6px 14px rgba(10, 37, 54, 0.14)); }

/* ── Sections ─────────────────────────────────────────────────────── */
.xs-section { position: relative; padding: 64px 0; }
.xs-head { max-width: 820px; }
.xs-head h2 { font-size: clamp(30px, 8.4vw, 36px); }
.xs-head .xs-lead { margin-top: 18px; }
.xs-tone--blue, .xs-tone--light { background: none; }

/* The French page: the features as a list */
.xs-fr-lead { max-width: 640px; margin: 22px auto 0; }
.xs-fr-cta { margin: 32px 0 18px; }
.xs-features .xs-head h2 { margin: 20px 0 0; }
.xs-features__list { max-width: 980px; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-strong); }
.xs-features__list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid var(--hair-strong); scroll-margin-top: calc(var(--nav-h) + 36px); }
.xs-features__name { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--label); }
.xs-features__list p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--label-2); }
.xs-features__more { margin: 28px 0 0; font-size: 16px; }
.xs-features__more a { color: var(--label); font-weight: 500; }

/* About: how we build, three rules under a graphite rule */
.xs-how { position: relative; padding: 64px 0; border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.xs-how__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: end; }
.xs-how__head h2 { font-size: clamp(30px, 8.4vw, 36px); }
.xs-how__head .xs-lead { max-width: 440px; justify-self: start; }
.xs-how__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 40px; }
.xs-how__step { position: relative; padding: 26px 24px 26px; border-radius: var(--r-xl); background: linear-gradient(160deg, #FCFCFD 0%, #F1F2F5 52%, #F6F7F9 100%); box-shadow: var(--glass-shadow-raised), inset 0 1px 0 #FFFFFF; }
.xs-how__step::before { content: ""; position: absolute; left: 24px; top: 0; width: 44px; height: 2px; border-radius: 2px; background: var(--graphite); }
.xs-how__step h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; color: var(--label); }
.xs-how__step p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--label-2); max-width: 30em; }
.xs-how__step small { display: block; margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-3); }

/* About: the vision */
.xp-vision { position: relative; padding: 16px 0 64px; }
.xp-vision__text { max-width: 900px; font-size: 21px; line-height: 1.42; letter-spacing: -0.016em; color: var(--label-2); text-wrap: pretty; }
.xp-vision__text b { font-weight: 600; color: var(--label); }
.xp-vision__text + .xp-vision__text { margin-top: 24px; }

/* The closing line and its button */
.xp-close { position: relative; padding: 16px 0 80px; text-align: center; }
.xp-close h2 { font-size: clamp(28px, 7.6vw, 32px); max-width: 760px; margin: 0 auto; }
.xp-close .xs-lead { max-width: 560px; margin: 16px auto 0; }
.xp-close .xs-btn { margin-top: 32px; }

/* ── Fields: wells, as in the dialogs ─────────────────────────────── */
.xp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.xp-label { font-size: 13.5px; font-weight: 600; color: var(--label); }
.xp-label .xp-optional { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--label-3); }
.xp-input, .xp-select, .xp-textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--field);
  box-shadow: var(--field-edge);
  color: var(--label);
  font: 16px/1.3 var(--font);
  outline: none;
  color-scheme: light;
  transition: box-shadow 400ms ease, background 400ms ease;
}
.xp-input::placeholder, .xp-textarea::placeholder { color: var(--label-4); }
.xp-input:hover, .xp-select:hover, .xp-textarea:hover { background: var(--field-hover); }
.xp-input:focus, .xp-select:focus, .xp-textarea:focus { background: var(--field-hover); box-shadow: var(--field-ring); }
.xp-input[aria-invalid="true"], .xp-textarea[aria-invalid="true"] { box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.08), inset 0 0 0 1px rgba(208, 59, 59, 0.55), 0 0 0 3px rgba(208, 59, 59, 0.08); }
.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='%2385878C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5 6 7.5l3-3'/></svg>"), var(--field);
  background-repeat: no-repeat;
  background-position: right 15px center, 0 0;
  background-size: 12px 12px, auto;
  cursor: pointer;
}
.xp-select option { background: #FFFFFF; color: var(--label); }
.xp-error { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--s-critical); }
.xp-error[hidden], .xp-alert[hidden], .xp-success[hidden] { display: none; }
.xp-hint { margin: 0; font-size: 12.5px; color: var(--label-3); }
.xp-alert { margin: 0 0 22px; padding: 10px 14px; border-radius: 12px; background: rgba(208, 59, 59, 0.07); box-shadow: inset 0 0 0 0.5px rgba(208, 59, 59, 0.3); color: #9E2B2B; font-size: 13.5px; line-height: 1.45; }

/* ── Glass cards ──────────────────────────────────────────────────── */
.xp-card {
  position: relative;
  padding: 28px 20px 26px;
  border-radius: var(--r-2xl);
  background: var(--glass-raised);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Contact ──────────────────────────────────────────────────────── */
.xp-contact { position: relative; padding: 0 0 80px; }
.xp-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.xp-contact__aside { padding-top: 8px; order: 2; }
.xp-steps { display: grid; gap: 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.xp-step { position: relative; padding-top: 20px; }
.xp-step::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 2px; border-radius: 2px; background: var(--graphite); }
.xp-step h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.016em; color: var(--label); }
.xp-step p { margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--label-2); max-width: 380px; }
.xp-reach { margin-top: 44px; }
.xp-reach dl { margin: 20px 0 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.xp-reach div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair-strong); }
.xp-reach dt { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-3); }
.xp-reach dd { margin: 0; font-size: 17px; font-weight: 500; color: var(--label); }
.xp-reach dd a { color: var(--label); }
.xp-reach dd small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--label-2); }
.xp-form__head { margin-bottom: 26px; }
.xp-form__head h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.04em; }
.xp-form__head p { margin-top: 6px; font-size: 15px; color: var(--label-2); }
.xp-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.xp-fields__full { grid-column: 1 / -1; }
.xp-form__foot { margin-top: 26px; }
.xp-form__foot .xs-btn { width: 100%; }
.xp-form__privacy { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--label-3); text-align: center; }
.xp-form__privacy a { color: var(--label-2); }
.xp-success { text-align: center; padding: 16px 0 8px; }
.xp-success:focus { outline: none; }
.xp-success__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 22px; border-radius: 50%; background: var(--graphite); box-shadow: var(--graphite-edge), 0 0 0 6px rgba(255, 255, 255, 0.7), 0 12px 30px -10px rgba(16, 24, 32, 0.4); color: #FFFFFF; }
.xp-success__icon svg { width: 26px; height: 26px; }
.xp-success h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.028em; color: var(--label); }
.xp-success p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--label-2); }
.xp-success p strong { font-weight: 600; color: var(--label); }
.xp-success p a { color: var(--label); }
.xp-success .xs-btn { margin-top: 26px; }

/* ── Roadmap ──────────────────────────────────────────────────────── */
.xp-today { position: relative; padding: 16px 0 56px; }
.xp-today__list { max-width: 900px; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-strong); }
.xp-today__list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0 16px; border-bottom: 1px solid var(--hair-strong); }
.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(--label); text-decoration: none; }
.xp-today__list span { font-size: 16px; line-height: 1.5; color: var(--label-2); }
.xp-next { position: relative; padding: 56px 0; }
.xp-next .xs-head { margin-bottom: 32px; }
.xp-next__list { display: grid; gap: 14px; max-width: 980px; margin: 0; padding: 0; list-style: none; }
.xp-next__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px 22px; border-radius: var(--r-xl); background: linear-gradient(160deg, #FCFCFD 0%, #F1F2F5 52%, #F6F7F9 100%); box-shadow: var(--glass-shadow-raised), inset 0 1px 0 #FFFFFF; }
.xp-next__item h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.024em; line-height: 1.15; color: var(--label); }
.xp-next__tag { margin-top: 10px; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--label); }
.xp-next__item p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--label-2); max-width: 600px; }
.xp-next__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
/* a status and a vote: brushed metal pills */
.xs-status { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--label-2); white-space: nowrap; }
.xp-vote {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--metal);
  box-shadow: var(--metal-edge);
  color: var(--label);
  font: 500 14px/1 var(--font);
  cursor: pointer;
  transition: background 400ms ease, box-shadow 400ms ease;
}
.xp-vote svg { width: 18px; height: 18px; flex: none; }
.xp-vote:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); }
.xp-vote.is-voted { background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; cursor: default; }
.xp-vote__count { min-width: 1.2em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; }

/* ── Legal documents: a rail and one reading column ──────────────── */
.xp-legal { position: relative; padding: 8px 0 72px; }
.xp-legal > .xs-wrap { z-index: auto; }
.xp-legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.xp-legal__rail { position: static; }
.xp-legal__rail::-webkit-scrollbar { display: none; }
.xp-legal__title { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-3); }
/* the three documents: a row of tabs on a phone, a list in the rail from 900 px */
.xp-legal__switch { display: flex; gap: 4px; margin: 0 0 18px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.1); 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: 1 0 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--label-2); text-decoration: none; transition: background 400ms ease, box-shadow 400ms ease, color 400ms ease; }
.xp-legal__switch a:hover { color: var(--label); }
.xp-legal__switch a[aria-current="page"] { background: var(--metal); box-shadow: var(--metal-edge); color: var(--label); }
.xp-legal__switch .xp-long { display: none; }
/* the contents: a bar on a phone that opens a glass sheet from the bottom */
.legal-toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--glass-raised);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
  color: var(--label);
  cursor: pointer;
  list-style: none;
}
.legal-toc > summary::-webkit-details-marker { display: none; }
.legal-toc > summary svg { width: 16px; height: 16px; color: var(--label-3); transform: rotate(180deg); }
.legal-toc:not([open]) > nav { display: none; }
.legal-toc[open]::before { content: ""; position: fixed; inset: 0; z-index: 90; background: rgba(226, 228, 232, 0.5); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); }
.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(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 24px 24px 0 0;
  background: var(--glass-raised);
  box-shadow: var(--glass-shadow-raised), inset 0 1px 0 #FFFFFF;
  animation: xp-sheet-in 260ms var(--ease);
}
@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: linear-gradient(180deg, #F3F4F7 70%, rgba(243, 244, 247, 0)); }
.xp-sheet__head .xp-legal__title { margin: 0; font-size: 16px; letter-spacing: -0.01em; text-transform: none; color: var(--label); }
.xp-sheet__close { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; padding: 0; border: 0; border-radius: 50%; background: var(--metal); box-shadow: var(--metal-edge); color: var(--label); cursor: pointer; transition: background 380ms ease, box-shadow 380ms ease, color 380ms ease; }
.xp-sheet__close:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); color: #D9483A; }
.xp-sheet__close svg { width: 14px; height: 14px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.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 var(--hair); font-size: 15px; line-height: 1.4; color: var(--label-2); transition: color 300ms ease; }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--label); }
.legal-toc__num { flex: none; min-width: 22px; font-variant-numeric: tabular-nums; color: var(--label-3); }
.legal-toc a.is-active .legal-toc__num { color: var(--label); }
/* the document */
.xp-doc { max-width: 720px; }
.xp-doc section { padding: 30px 0; border-top: 1px solid var(--hair-strong); scroll-margin-top: calc(var(--nav-h) + 36px); }
.xp-doc section:first-child { padding-top: 8px; border-top: 0; }
.xp-doc h2 { display: flex; gap: 12px; align-items: baseline; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--label); }
.legal-num { flex: none; min-width: 30px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--label-3); }
.xp-doc p, .xp-doc li { font-size: 16px; line-height: 1.65; color: var(--label-2); }
.xp-doc p { margin-top: 14px; }
.xp-doc ul { margin: 14px 0 0; padding-left: 20px; }
.xp-doc li + li { margin-top: 8px; }
.xp-doc strong { font-weight: 600; color: var(--label); }
.xp-doc a { color: var(--label); }
.xp-measures { counter-reset: xp-measure; margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair-strong); }
.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 var(--hair-strong); }
.xp-measures li + li { margin-top: 0; }
.xp-measures li::before { content: counter(xp-measure, decimal-leading-zero); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--label-3); padding-top: 3px; }
.xp-legal__meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; font-size: 14px; color: var(--label-2); }
.xp-legal__meta b { font-weight: 600; color: var(--label); }
.xp-legal__meta a { color: var(--label); }
.xp-footnote { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair-strong); font-size: 13.5px; line-height: 1.5; color: var(--label-3); }
.xp-footnote a { color: var(--label-2); }
/* tables: cards of labelled lines on a phone, a table from 900 px */
.xp-table-wrap { margin-top: 20px; }
.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 var(--hair-strong); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-3); }
.xp-table tr { padding: 14px 0; border-bottom: 1px solid var(--hair-strong); }
.xp-table td { padding: 6px 0; vertical-align: top; color: var(--label-2); }
.xp-table td:first-child { padding-top: 0; font-size: 16px; color: var(--label); 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(--label-3); }
.xp-table td:first-child::before { display: none; }
.xp-table a { overflow-wrap: anywhere; }

/* ── The user guide (styles/user-guide.css, on the workspace tokens) ─ */
.ug-body { --ug-header-h: calc(var(--nav-h) + 12px); }
body.ug-body { background: transparent; }

/* ── The bare sign-in pages: join, forgot and reset password ─────── */
body.lg-body { background: #ECEDF0; color: var(--label); font-family: var(--font); -webkit-font-smoothing: antialiased; }
/* the theme's ground (site.css body::before): these pages keep the workspace stack, not the theme */
body.lg-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 820px at 4% -18%, #FFFFFF, rgba(255, 255, 255, 0) 60%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(1000px 720px at 92% 112%, rgba(167, 198, 219, 0.28), rgba(167, 198, 219, 0) 60%),
    radial-gradient(820px 600px at 26% 110%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #F6F6F8 0%, #E4E5E9 100%);
}
body.lg-body .au-side { position: relative; background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset -1px 0 0 var(--hair); }
body.lg-body .au-main { background: transparent; }
/* on a phone the card carries the lock-up; from 900 px the side panel does */
body.lg-body .au .lg-card__brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--label); text-decoration: none; }
body.lg-body .au .lg-card__brand .xy-logo__mark { width: 26px; height: 26px; filter: drop-shadow(0 0.5px 0.6px rgba(10, 37, 54, 0.32)); }
body.lg-body .au .lg-card__brand .xy-logo__word { display: inline; font-family: var(--font-brand, var(--font)); font-weight: 700; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brand); }
body.lg-body .au-form { max-width: 440px; }
body.lg-body .au .lg-card { max-width: 440px; padding: 26px 22px 22px; background: var(--glass-raised); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow-raised), inset 0 1px 0 rgba(255, 255, 255, 0.9); border: 0; border-radius: 28px; }
body.lg-body .lg-card__heading h1 { font-family: var(--font); font-size: 32px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; background: var(--metal-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: 0.04em; }
body.lg-body .lg-card__heading p { color: var(--label-2); font-size: 15px; line-height: 1.5; }
body.lg-body .lg-field label { color: var(--label); font-size: 13.5px; font-weight: 600; }
body.lg-body .lg-field input { height: 48px; padding: 0 14px; font-size: 16px; font-family: var(--font); border: 0; border-radius: 12px; background: var(--field); box-shadow: var(--field-edge); color: var(--label); color-scheme: light; transition: box-shadow 400ms ease, background 400ms ease; }
body.lg-body .lg-field input::placeholder { color: var(--label-4); }
body.lg-body .lg-field input:hover { background: var(--field-hover); }
body.lg-body .lg-field input:focus { background: var(--field-hover); box-shadow: var(--field-ring); }
body.lg-body .lg-field input[aria-invalid="true"] { box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.08), inset 0 0 0 1px rgba(208, 59, 59, 0.55), 0 0 0 3px rgba(208, 59, 59, 0.08); }
body.lg-body .lg-field input[readonly] { background: rgba(0, 0, 0, 0.03); color: var(--label-2); }
body.lg-body .lg-field input[readonly]:focus { box-shadow: var(--field-edge); }
body.lg-body .lg-field__pw-wrap input { padding-right: 52px; }
body.lg-body .lg-field__toggle { width: 44px; height: 44px; right: 2px; border-radius: 10px; color: var(--label-2); background: none; }
body.lg-body .lg-field__toggle:hover { color: var(--label); background: rgba(0, 0, 0, 0.04); }
body.lg-body .lg-hint, body.lg-body .lg-help, body.lg-body .lg-card__footer { color: var(--label-3); }
body.lg-body .lg-card__footer { border-top-color: var(--hair); }
body.lg-body .lg-card__footer a, body.lg-body .lg-link, body.lg-body .lg-help a { color: var(--label); border-bottom-color: rgba(0, 0, 0, 0.25); }
body.lg-body .lg-card__footer a:hover, body.lg-body .lg-link:hover, body.lg-body .lg-help a:hover { color: var(--label); border-bottom-color: var(--label); }
body.lg-body .lg-rules li { color: var(--label-3); }
body.lg-body .lg-rules li::before { border-color: rgba(0, 0, 0, 0.25); }
body.lg-body .lg-error { border: 0; border-radius: 12px; background: rgba(208, 59, 59, 0.07); box-shadow: inset 0 0 0 0.5px rgba(208, 59, 59, 0.3); color: #9E2B2B; }
body.lg-body .lg-submit { position: relative; height: 50px; border: 0; border-radius: 999px; background: var(--graphite); box-shadow: var(--graphite-edge); color: #FFFFFF; font-family: var(--font); font-size: 15px; font-weight: 500; text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4); transition: background 420ms ease, box-shadow 420ms ease; }
body.lg-body .lg-submit:hover:not(:disabled) { background: var(--graphite-hover); color: #FFFFFF; box-shadow: var(--graphite-edge), 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 18px rgba(255, 255, 255, 0.7); }
body.lg-body .lg-submit__spinner { border-color: rgba(255, 255, 255, 0.3); border-top-color: #FFFFFF; }
body.lg-body .btn--ghost { height: 50px; border: 0; border-radius: 999px; background: var(--metal); box-shadow: var(--metal-edge); color: var(--label); font-family: var(--font); font-size: 15px; font-weight: 500; cursor: pointer; }
body.lg-body .btn--ghost:hover { background: var(--metal-hover); box-shadow: var(--metal-edge), var(--metal-glow); }
body.lg-body .btn--lg { height: 50px; }
body.lg-body .lg-state-icon { border: 0; background: var(--graphite); box-shadow: var(--graphite-edge), 0 0 0 6px rgba(255, 255, 255, 0.7); color: #FFFFFF; }
body.lg-body .lg-state-icon--warn { background: linear-gradient(180deg, #E6B85C 0%, #C9922E 100%); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.7); color: #FFFFFF; }
body.lg-body .lg-state-icon--info { color: #FFFFFF; }
body.lg-body .lg-loading { color: var(--label-2); }
body.lg-body .lg-loading__spinner { border-color: rgba(0, 0, 0, 0.12); border-top-color: var(--label); }
body.lg-body .au-foot { color: var(--label-3); }
body.lg-body .au-foot a { color: var(--label-2); }
body.lg-body .au-foot a:hover { color: var(--label); }
body.lg-body .xs-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--label); text-decoration: none; }
body.lg-body .xs-brand img { width: 26px; height: 26px; filter: drop-shadow(0 0.5px 0.6px rgba(10, 37, 54, 0.32)); }
body.lg-body .xs-brand span { font-family: var(--font-brand, var(--font)); font-weight: 700; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brand); }
.au-side .xs-brand { align-self: flex-start; }
.au-side .xs-mark--aside { margin: auto 0 26px; }
.au-side .xs-mark--aside::before { inset: -40px; }
.xs-aside-motto { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.4; color: var(--label-2); }

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

/* ── Larger screens ─────────────────────────────────────────────── */
@media (min-width: 600px) {
  .xs-lead { font-size: 19px; }
  .xs-body { font-size: 18px; }
  .xs-hero { padding: calc(var(--nav-h) + 96px) 0 96px; }
  .xs-hero h1 { font-size: clamp(46px, 7vw, 60px); }
  .xs-hero--page { padding-bottom: 64px; }
  .xs-hero--page h1 { font-size: clamp(44px, 6.6vw, 56px); margin-top: 22px; }
  .xs-hero--page .xs-h1-eyebrow > .xs-eyebrow { margin-bottom: 22px; }
  .xs-hero--page .xs-lead { margin-top: 24px; font-size: 20px; }
  .xs-section { padding: 104px 0; }
  .xs-head h2, .xs-how__head h2 { font-size: clamp(38px, 5.4vw, 44px); }
  .xs-features .xs-head h2 { margin-top: 24px; }
  .xs-how { padding: 96px 0; }
  .xs-how__steps { margin-top: 48px; }
  .xp-vision { padding-bottom: 96px; }
  .xp-close { padding-bottom: 120px; }
  .xp-close h2 { font-size: 36px; }
  .xp-card { padding: 34px 30px 30px; }
  .xp-contact { padding-bottom: 120px; }
  .xp-contact__grid { gap: 56px; }
  .xp-form__head h2 { font-size: 28px; }
  .xp-today { padding-bottom: 80px; }
  .xp-next { padding: 88px 0; }
  .xp-next .xs-head { margin-bottom: 44px; }
  .xp-next__item { padding: 30px 30px; }
  .xp-legal { padding: 20px 0 104px; }
  .xp-legal__grid { gap: 30px; }
  .xp-legal__switch .xp-long { display: inline; }
  .xp-legal__switch .xp-short { display: none; }
  .legal-toc[open] > nav { max-width: 560px; margin: 0 auto; }
  body.lg-body .lg-card__heading h1 { font-size: 34px; }
  body.lg-body .au .lg-card { padding: 36px 36px 28px; }
}
@media (min-width: 900px) {
  .xs-lead { font-size: 18px; }
  .xs-hero { padding: calc(var(--nav-h) + 128px) 0 140px; }
  .xs-hero h1 { font-size: clamp(62px, 6vw, 80px); }
  .xs-hero--page { padding-bottom: 88px; }
  .xs-hero--page h1 { font-size: clamp(56px, 5.4vw, 72px); }
  .xs-section { padding: 160px 0; }
  .xs-features__list li { grid-template-columns: 250px 1fr; gap: 12px 24px; padding: 18px 0; }
  .xs-how { padding: 140px 0 150px; }
  .xs-how__head { grid-template-columns: 1fr 1fr; gap: 60px; }
  .xs-how__head .xs-lead { justify-self: end; }
  .xs-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
  .xp-vision { padding-bottom: 136px; }
  .xp-vision__text { font-size: 26px; }
  .xp-close { padding-bottom: 180px; }
  .xp-close h2 { font-size: 42px; }
  .xp-input, .xp-select, .xp-textarea { height: 44px; font-size: 15px; }
  .xp-textarea { height: auto; }
  .xp-card { padding: 44px 44px 40px; }
  .xp-contact { padding-bottom: 180px; }
  .xp-contact__grid { grid-template-columns: 0.8fr 1.2fr; }
  .xp-contact__aside { order: 0; }
  .xp-fields { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .xp-reach { margin-top: 64px; }
  .xp-reach div { grid-template-columns: 150px 1fr; gap: 16px; }
  .xp-today { padding-bottom: 104px; }
  .xp-today__list { margin-top: 44px; }
  .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: 128px 0 112px; }
  .xp-next .xs-head { margin-bottom: 64px; }
  .xp-next__item { grid-template-columns: 1fr auto; gap: 24px 56px; padding: 40px 40px; }
  .xp-next__item h3 { font-size: 30px; }
  .xp-next__tag { font-size: 19px; }
  .xp-next__side { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; justify-content: normal; gap: 16px; padding-top: 6px; }
  .xp-legal { padding: 20px 0 150px; }
  .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(--nav-h) + 40px); max-height: calc(100vh - var(--nav-h) - 72px); overflow-y: auto; scrollbar-width: none; }
  .xp-legal__switch { display: grid; gap: 2px; margin: 0 0 36px; padding: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .xp-legal__switch .xp-legal__title { display: block; }
  .xp-legal__switch a { display: block; min-height: 0; padding: 9px 12px; border-radius: 12px; }
  .xp-legal__switch a[aria-current="page"] { background: var(--metal); box-shadow: var(--metal-edge); }
  .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-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 12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-3); }
  .xp-sheet__close { display: none; }
  .legal-toc a { align-items: normal; min-height: 0; padding: 8px 0; font-size: 13.5px; }
  .xp-doc section { padding: 40px 0; }
  .xp-doc h2 { gap: 18px; font-size: 24px; }
  .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 var(--hair-strong); }
  .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; }
  .xs-motto-l2 { white-space: nowrap; }
  body.lg-body .au .lg-card__brand { display: none; }
  body.lg-body .lg-field input { height: 44px; font-size: 15px; }
  body.lg-body .lg-field__toggle { width: 36px; height: 36px; right: 4px; }
  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, body.xp-portal-terms .cp-brand__label, body.xp-portal-terms .cp-foot__powered .xy-logo__word { font-size: 10.5px; }
  body.xp-portal-terms .cp-foot { font-size: 12.5px; }
}
@media (min-width: 1200px) {
  .xp-contact__grid { gap: 96px; }
  .xp-vision__text { font-size: 30px; }
  .xp-legal__grid { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-toc[open] > nav { animation: none; }
}