/* ============================================================
   Xycora public site: palette C2 ("Midnight gradient", settled 10 Oct 2026)
   with the halo, champagne hairline, grain and air of prompts 012 and 013.

   This sheet is self-contained: it carries its own tokens (prefixed, so
   they never collide with styles/variables.css) and every rule is scoped
   to an "xs-" class. The homepage, Product, Pricing and Roadmap pages load
   only this sheet; the other public pages load it after system.css for the
   shared chrome (header, footer, sign-in dialog) until they are redesigned.

   Ground: #070C12 -> #0C1722 -> #080E14. Ice #A7C6DB for small labels only.
   Light pools subdued. One precious detail: a 1 px champagne hairline inside
   every film bezel, along the top of the trial card and in the countdown.
   The mark is never recoloured: its spark comes from the light behind it.

   Mobile first (prompt 034): a rule with no media query is the phone
   rule. Larger screens add to it at the end of the sheet, at 600 px
   (large phones, small tablets), 900 px (the desktop header and the
   two-column layouts) and 1200 px (the full desktop type scale).
   ============================================================ */

@import url('fonts.css?v=20261011a');

:root {
  --xs-bg0: #070C12;
  --xs-bg1: #0C1722;
  --xs-bg2: #080E14;
  --xs-ice: #A7C6DB;
  --xs-ice-rgb: 167, 198, 219;
  --xs-ice-pool: 122, 160, 190;
  --xs-warm-pool: 217, 179, 140;
  --xs-champagne: #C9B37E;
  --xs-champagne-soft: rgba(201, 179, 126, 0.55);
  --xs-t1: #FFFFFF;
  --xs-t2: #E6EDF3;
  --xs-t3: #A3B2C0;
  --xs-t4: #5E7085;
  --xs-line: rgba(255, 255, 255, 0.08);
  --xs-line-hi: rgba(255, 255, 255, 0.12);
  --xs-card: rgba(255, 255, 255, 0.03);
  --xs-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Every headline (prompt 038): an editorial serif, light and unhurried */
  --xs-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --xs-wordmark: "Plus Jakarta Sans", "Inter", sans-serif;
  --xs-header-h: 64px;
  --xs-gutter: 16px;
  --xs-max: 1200px;
}

/* ── The dark pages (home, product, pricing, roadmap) ──────────────────── */
html.xs-root { background: var(--xs-bg0); }
body.xs-page {
  margin: 0;
  font-family: var(--xs-sans);
  font-optical-sizing: auto;
  color: var(--xs-t2);
  background: linear-gradient(180deg, var(--xs-bg0) 0%, var(--xs-bg1) 46%, var(--xs-bg2) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.xs-page *, body.xs-page *::before, body.xs-page *::after { box-sizing: border-box; }
body.xs-page img { display: block; max-width: 100%; }
body.xs-page a { color: inherit; text-decoration: none; }
/* A zero-specificity reset, so every spacing rule below outranks it. */
:where(body.xs-page) :where(h1, h2, h3, h4, p, dl, dd) { margin: 0; }
body.xs-page ::selection { background: rgba(var(--xs-ice-rgb), 0.28); }

/* The page wrapper clips the colour pools that spill past the right edge,
   so they never widen the document (the old hero overflowed on phones). */
.xs-shell { position: relative; overflow: hidden; }
/* Film grain on the ground, kept faint, so the dark reads as material */
.xs-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='2.6' intercept='-0.8'/><feFuncG type='linear' slope='2.6' intercept='-0.8'/><feFuncB type='linear' slope='2.6' intercept='-0.8'/></feComponentTransfer></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

.xs-wrap {
  width: 100%;
  max-width: calc(var(--xs-max) + 2 * var(--xs-gutter));
  margin: 0 auto;
  padding: 0 var(--xs-gutter);
  position: relative;
  z-index: 1;
}

/* Colour pools: large, very soft, behind key sections. The shining is the point. */
.xs-pool { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.xs-pool--ice { background: radial-gradient(closest-side, rgba(var(--xs-ice-pool), 0.07), rgba(var(--xs-ice-pool), 0)); }
.xs-pool--warm { background: radial-gradient(closest-side, rgba(var(--xs-warm-pool), 0.04), rgba(var(--xs-warm-pool), 0)); }

/* ── Type ──────────────────────────────────────────────────────────────── */
.xs-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xs-ice);
}
/* A page's eyebrow can sit inside its H1, so the heading says what the page is about; it is drawn exactly as
   the eyebrow above a heading always was (the heading's own top margin moves under it). */
.xs-h1-eyebrow > .xs-eyebrow { font-family: var(--xs-sans); line-height: normal; margin: 0 0 18px; }
.xs-hero--page h1.xs-h1-eyebrow { margin-top: 0; }
/* The homepage hero: the eyebrow fits in the gap under the mark (14 + 14 + 8 = the mark's 36px), so the motto and
   the first film sit exactly where they did. */
.xs-mark:not(.xs-mark--left):has(+ .xs-h1-eyebrow) { margin-bottom: 14px; }
.xs-mark:not(.xs-mark--left) + .xs-h1-eyebrow > .xs-eyebrow { margin-bottom: 8px; }
.xs-display {
  font-family: var(--xs-serif);
  font-weight: 450;
  font-optical-sizing: auto;
  letter-spacing: -0.016em;
  line-height: 1.05;
  color: var(--xs-t1);
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE5EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}
.xs-lead { font-size: 17px; line-height: 1.6; color: var(--xs-t3); }
.xs-body { font-size: 16px; line-height: 1.6; color: var(--xs-t3); }

/* ── Buttons: the only bright surface is the off-white button ──────────── */
.xs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #EEF1F0;
  color: #06111D;
  font-family: var(--xs-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  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;
}
/* The dark pages give every link the page colour; the button keeps its ink. */
body.xs-page a.xs-btn, .xs-btn, .xs-btn:hover { color: #06111D; }
.xs-btn:hover { background: #FFFFFF; }
.xs-btn:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 3px; }
.xs-btn--sm { height: 38px; padding: 0 18px; font-size: 14px; }
.xs-btn--full { width: 100%; }

/* ── Header ────────────────────────────────────────────────────────────── */
.xs-skip {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 6px;
  background: #EEF1F0;
  color: #06111D;
  font: 500 14px/1 var(--xs-sans);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.xs-skip:focus, .xs-skip:focus-visible { transform: translateY(0); }

.xs-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  height: var(--xs-header-h);
  z-index: 60;
  font-family: var(--xs-sans);
  background: var(--xs-bg0);
  transition: background 200ms ease, box-shadow 200ms ease;
}
/* On the dark pages the header is transparent at the top, so the hero's
   light pool and the mark's halo continue under it; it gains a glass ground
   once the page has scrolled. */
.xs-page .xs-header { background: transparent; }
.xs-page .xs-header.is-scrolled,
.xs-header.is-scrolled {
  background: rgba(7, 12, 18, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.xs-header__in {
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.xs-brand { display: inline-flex; align-items: center; gap: 13px; color: var(--xs-t1); text-decoration: none; }
/* The header's mark is a 44 px target; it stays centred in the bar. */
.xs-header .xs-brand { min-height: 44px; }
/* A faint glow behind the mark image only, never the wordmark */
.xs-brand img { width: 26px; height: 26px; filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18)); }
.xs-brand span {
  font-family: var(--xs-wordmark);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--xs-t1);
  transform: translateY(1px);
}
/* The phone header is the mark and the menu button; the links, Log in and
   the demo button join it from 900 px. */
.xs-nav { display: none; gap: 40px; justify-self: center; align-items: center; }
.xs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--xs-t3);
  text-decoration: none;
  transition: color 140ms ease;
}
.xs-nav__link:hover, .xs-nav__link.is-active, .xs-nav__link[aria-current="page"] { color: var(--xs-t1); }
.xs-nav__chev { width: 10px; height: 10px; color: var(--xs-t4); transition: transform 160ms ease, color 160ms ease; }
.xs-menu { position: relative; }
.xs-menu:hover .xs-nav__chev, .xs-menu.is-open .xs-nav__chev, .xs-menu:focus-within .xs-nav__chev { transform: rotate(180deg); color: var(--xs-ice); }
.xs-menu__panel {
  position: absolute;
  left: 50%;
  top: 100%;
  padding-top: 22px;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 70;
}
.xs-menu:hover .xs-menu__panel, .xs-menu.is-open .xs-menu__panel, .xs-menu:focus-within .xs-menu__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* The page dims a little while the menu is open. The scrim sits behind the
   header's own content (a negative index inside the header's stacking
   context) and above the page. */
.xs-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(7, 12, 18, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.xs-menu:hover ~ .xs-menu__scrim, .xs-menu.is-open ~ .xs-menu__scrim, .xs-menu:focus-within ~ .xs-menu__scrim { opacity: 1; }
.xs-menu__grid {
  width: 520px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(14, 25, 38, 0.9) 0%, rgba(8, 16, 26, 0.9) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    0 18px 40px -20px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.xs-menu__grid a { display: block; padding: 13px 16px 12px; border-radius: 13px; text-decoration: none; transition: background 120ms ease; }
.xs-menu__grid a:hover, .xs-menu__grid a:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.xs-menu__grid b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--xs-t1); }
.xs-menu__grid span { display: block; margin-top: 3px; font-size: 13px; color: var(--xs-t3); }
.xs-header__right { display: flex; align-items: center; gap: 28px; justify-self: end; }
.xs-header__login {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--xs-sans); font-size: 14px; font-weight: 500; color: var(--xs-t2);
}
.xs-header__login:hover { color: var(--xs-t1); }
.xs-header__right .xs-header__login, .xs-header__right .xs-btn { display: none; }
.xs-burger {
  display: flex;
  justify-self: end;
  width: 44px; height: 44px;
  margin-right: -12px;
  border: 0; border-radius: 10px;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.xs-burger:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: -4px; }
.xs-burger i { display: block; width: 20px; height: 1.5px; background: var(--xs-t1); border-radius: 2px; transition: transform 180ms ease, opacity 180ms ease; }
body.xs-nav-open .xs-burger i:first-child { transform: translateY(3.75px) rotate(45deg); }
body.xs-nav-open .xs-burger i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* Phone menu: full screen under the header's mark and close button, one
   52 px row per page; Product opens its sections in place. */
.xs-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--xs-header-h) + 8px) var(--xs-gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, var(--xs-bg0) 0%, var(--xs-bg1) 100%);
  font-family: var(--xs-sans);
}
body.xs-nav-open .xs-mobile { display: block; }
/* The page behind the open menu or an open sheet (contents) stays still. */
body.xs-nav-open, body.xs-sheet-open { overflow: hidden; }
.xs-mobile__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--xs-line); }
.xs-mobile__list > li { border-bottom: 1px solid var(--xs-line); }
.xs-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 500 18px/1.2 var(--xs-sans);
  letter-spacing: -0.01em;
  color: var(--xs-t1);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.xs-mobile__link:focus-visible, .xs-mobile__sub a:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 2px; border-radius: 4px; }
.xs-mobile__chev { flex: none; width: 16px; height: 16px; color: var(--xs-t3); transition: transform 160ms ease; }
.xs-mobile__link[aria-expanded="true"] .xs-mobile__chev { transform: rotate(180deg); color: var(--xs-ice); }
.xs-mobile__sub { list-style: none; margin: 0; padding: 0 0 8px; }
.xs-mobile__sub[hidden] { display: none; }
.xs-mobile .xs-mobile__sub a { display: flex; align-items: center; min-height: 44px; padding-left: 16px; font-size: 16px; color: var(--xs-t3); text-decoration: none; }
.xs-mobile .xs-mobile__sub a:hover { color: var(--xs-t1); }
.xs-mobile__actions { display: grid; gap: 12px; margin-top: 28px; }
.xs-mobile__actions .xs-header__login { height: 50px; border: 1px solid var(--xs-line-hi); border-radius: 999px; font-size: 15px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.xs-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 48px 0 28px;
  font-family: var(--xs-sans);
  color: var(--xs-t2);
  background: var(--xs-bg2);
}
.xs-page .xs-footer { background: transparent; }
/* Phone: the brand across the top, then the groups in two columns of
   44 px rows (Product on the left, Company and Legal on the right). */
.xs-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; }
.xs-footer__brand { grid-column: 1 / -1; }
.xs-footer__grid > :nth-child(2) { grid-row: span 2; }
.xs-footer__word {
  display: block;
  font-family: var(--xs-wordmark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--xs-t1);
}
.xs-footer__tag { margin: 16px 0 8px; font-size: 15px; line-height: 1.5; color: var(--xs-t2); max-width: 360px; }
.xs-footer__brand a { display: flex; align-items: center; width: fit-content; min-height: 44px; margin-top: 0; font-size: 14px; color: var(--xs-t3); text-decoration: none; }
.xs-footer__brand a:hover { color: var(--xs-ice); }
.xs-footer__col h2 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--xs-t3); font-family: var(--xs-sans); line-height: 1; }
.xs-footer__col ul { list-style: none; margin: 0; padding: 0; }
.xs-footer__col a { display: flex; align-items: center; width: auto; min-height: 44px; font-size: 15px; line-height: 1.4; color: var(--xs-t2); margin-bottom: 0; text-decoration: none; }
.xs-footer__col a:hover { color: var(--xs-ice); }
.xs-footer__bottom { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--xs-t4); }

/* ── Sign-in dialog (prompt 004): the mark with its halo on the dark ground,
   the motto, no trust lines. The ids and field classes are the ones
   dialogs.js and the two-step code step (two-step-signin.js) expect.
   Phone: a full-height sheet with a 44 px close at the top and 16 px
   fields; from 600 px the centred card; under 900 px every control keeps
   a 44 px touch area. ─────────────────────────────────────────────────── */
#dialog-login.xs-login {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  transform: none;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #0D1927 0%, #080F18 100%);
  color: var(--xs-t2);
  font-family: var(--xs-sans);
  box-shadow: none;
  animation: none;
}
#dialog-login.xs-login::backdrop {
  background: rgba(4, 8, 13, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.xs-login__inner {
  position: relative;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.xs-login__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--xs-t3);
  font: 16px/1 var(--xs-sans);
  cursor: pointer;
}
.xs-login__close:hover { color: var(--xs-t1); background: rgba(255, 255, 255, 0.05); }
/* One close control only: system.css draws its own X on .dialog__close with
   a pseudo-element, which would show beside the glyph on the Counsel pages. */
#dialog-login.xs-login .dialog__close::before, .xs-login .dialog__close::after { content: none; display: none; }
#dialog-login.xs-login .dialog__close { font-size: 18px; line-height: 1; width: 44px; height: 44px; top: calc(6px + env(safe-area-inset-top, 0px)); right: 6px; }
.xs-login__mark { position: relative; width: 44px; height: 44px; margin: 0 auto 16px; }
.xs-login__mark::before {
  content: "";
  position: absolute;
  inset: -64px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0));
}
.xs-login__mark img { position: relative; width: 44px; height: 44px; }
.xs-login__motto { margin: 0 0 32px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--xs-t3); }
#dialog-login.xs-login .dialog__heading { margin: 0; font-family: var(--xs-serif); font-size: 32px; font-weight: 450; letter-spacing: -0.012em; line-height: 1.08; color: var(--xs-t1); }
#dialog-login.xs-login .dialog__sub { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--xs-t3); }
#dialog-login.xs-login form { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; text-align: left; }
/* The code step hides the password form with the hidden attribute. */
#dialog-login.xs-login form[hidden] { display: none; }
#dialog-login.xs-login .form-group { display: flex; flex-direction: column; gap: 7px; margin: 0; }
#dialog-login.xs-login .form-label { font-size: 13px; font-weight: 500; color: var(--xs-t2); }
#dialog-login.xs-login .form-input {
  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.04);
  color: var(--xs-t1);
  font: 16px/1 var(--xs-sans);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
#dialog-login.xs-login .form-input::placeholder { color: var(--xs-t4); }
#dialog-login.xs-login .form-input:focus { border-color: rgba(var(--xs-ice-rgb), 0.7); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(var(--xs-ice-rgb), 0.16); }
#dialog-login.xs-login .form-input[aria-invalid="true"] { border-color: #D98A8A; }
#dialog-login.xs-login .form-input-wrapper { position: relative; }
#dialog-login.xs-login .form-input-wrapper .form-input { padding-right: 64px; }
#dialog-login.xs-login .form-input-wrapper__toggle {
  position: absolute; top: 0; right: 0; bottom: 0; transform: none; border-radius: 0;
  height: 48px; margin: 0; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 0; background: none;
  color: var(--xs-t3);
  font: 500 13px/1 var(--xs-sans);
  line-height: 48px;
  cursor: pointer;
}
#dialog-login.xs-login .form-input-wrapper__toggle:hover { color: var(--xs-t1); }
#dialog-login.xs-login .form-link { display: inline-flex; align-items: center; align-self: flex-end; min-height: 44px; margin-top: -6px; font-size: 13px; color: var(--xs-t3); text-decoration: none; }
#dialog-login.xs-login .form-link:hover { color: var(--xs-t1); }
#dialog-login.xs-login .dialog__error { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(217, 138, 138, 0.1); border: 1px solid rgba(217, 138, 138, 0.3); color: #F2C4C4; font-size: 13.5px; line-height: 1.45; }
#dialog-login.xs-login .dialog__error[hidden] { display: none; }
#dialog-login.xs-login .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: #EEF1F0; color: #06111D;
  font: 600 15px/1 var(--xs-sans);
  cursor: pointer;
  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;
}
#dialog-login.xs-login .btn:hover { background: #FFFFFF; }
#dialog-login.xs-login .btn[disabled] { opacity: 0.7; cursor: default; }
#dialog-login.xs-login .btn--full { width: 100%; }
#dialog-login.xs-login .btn--ghost { background: transparent; color: var(--xs-t2); border: 1px solid var(--xs-line-hi); box-shadow: none; }
#dialog-login.xs-login .btn--ghost:hover { background: rgba(255, 255, 255, 0.05); }
#dialog-login.xs-login .form-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--xs-t2); cursor: pointer; }
/* Under 900 px the box is drawn at 20 px inside a 44 px touch area. */
#dialog-login.xs-login .form-checkbox input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 44px; height: 44px;
  margin: 0 -10px 0 -12px;
  border: 0;
  border-radius: 0;
  background: center / 20px 20px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect x='0.5' y='0.5' width='19' height='19' rx='5' fill='rgba(255,255,255,0.04)' stroke='rgba(255,255,255,0.32)'/></svg>");
  cursor: pointer;
}
#dialog-login.xs-login .form-checkbox input:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width='20' height='20' rx='5' fill='%23A7C6DB'/><path d='m5.5 10.2 3 3 6-6.4' fill='none' stroke='%2306111D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#dialog-login.xs-login .form-checkbox input:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: -12px; }
#dialog-login.xs-login .dialog__switch { margin: 22px 0 0; padding: 0; border: 0; font-size: 14px; color: var(--xs-t3); text-align: center; }
#dialog-login.xs-login .dialog__switch a, .xs-login .dialog__switch button {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--xs-t1); text-decoration: none;
}
#dialog-login.xs-login .dialog__switch a:hover, .xs-login .dialog__switch button:hover { color: var(--xs-ice); }
#dialog-login.xs-login .xy-2s__lead, #dialog-login.xs-login #form-two-step .xy-2s__lead { color: var(--xs-t3); text-align: center; }
#dialog-login.xs-login #form-two-step .dialog__switch { justify-content: center; }
/* The code step's text buttons: a 44 px row each under 900 px, underlined
   as text so the line stays under the words. */
#dialog-login.xs-login #form-two-step .xy-2s__more { gap: 0 18px; }
#dialog-login.xs-login #form-two-step .dialog__switch button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--xs-t1);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.28);
}
#dialog-login.xs-login #form-two-step .dialog__switch button:hover { color: var(--xs-ice); text-decoration-color: var(--xs-ice); }
#dialog-login.xs-login .xy-2s__codes { border-color: var(--xs-line-hi); color: var(--xs-t1); }

/* ── Film frames: dark bezel, 1 px highlight, a champagne hairline inset
   8 px, soft reflection below. The poster is the frame until the film
   arrives; the play control is visible and the <video> sits on top. ────── */
.xs-frame {
  position: relative;
  border-radius: 16px;
  padding: 7px;
  background: linear-gradient(180deg, #0F1D2D 0%, #0A1522 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  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),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  z-index: 1;
}
.xs-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--xs-champagne-soft);
  border-radius: 11px;
  pointer-events: none;
  z-index: 3;
}
.xs-frame::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%;
  top: calc(100% + 6px);
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--xs-ice-pool), 0.14), rgba(var(--xs-ice-pool), 0) 85%);
  filter: blur(22px);
  pointer-events: none;
}
.xs-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  background-color: #08121D;
}
.xs-poster--p1 {
  background-image:
    linear-gradient(112deg, rgba(255,255,255,0) 44%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0) 56%),
    radial-gradient(70% 90% at 18% 20%, rgba(var(--xs-ice-pool), 0.26) 0%, rgba(var(--xs-ice-pool), 0) 62%),
    radial-gradient(60% 80% at 86% 82%, rgba(var(--xs-warm-pool), 0.16) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    radial-gradient(120% 70% at 50% 120%, #10263C 0%, rgba(16, 38, 60, 0) 70%),
    linear-gradient(165deg, #0D1B2B 0%, #060E18 55%, #0A1A2A 100%);
}
.xs-poster--p2 {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 90% at 84% 18%, rgba(var(--xs-ice-pool), 0.30) 0%, rgba(var(--xs-ice-pool), 0) 60%),
    radial-gradient(60% 70% at 12% 88%, rgba(var(--xs-warm-pool), 0.14) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(200deg, #0C1A2A 0%, #070F19 60%, #0B1826 100%);
}
.xs-poster--p3 {
  background-image:
    linear-gradient(125deg, rgba(255,255,255,0) 46%, rgba(255,255,255,0.03) 52%, rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 50% 110%, rgba(var(--xs-ice-pool), 0.32) 0%, rgba(var(--xs-ice-pool), 0) 62%),
    radial-gradient(50% 60% at 15% 10%, rgba(var(--xs-warm-pool), 0.13) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(175deg, #0B1726 0%, #060E18 55%, #0A1A2A 100%);
}
.xs-poster--p4 {
  background-image:
    linear-gradient(95deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 58%),
    radial-gradient(70% 80% at 22% 78%, rgba(var(--xs-ice-pool), 0.31) 0%, rgba(var(--xs-ice-pool), 0) 62%),
    radial-gradient(50% 60% at 84% 16%, rgba(var(--xs-warm-pool), 0.15) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(150deg, #0E1C2C 0%, #070F19 55%, #0A1826 100%);
}
.xs-poster--p5 {
  background-image:
    linear-gradient(118deg, rgba(255,255,255,0) 44%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0) 56%),
    radial-gradient(60% 90% at 70% 30%, rgba(var(--xs-ice-pool), 0.28) 0%, rgba(var(--xs-ice-pool), 0) 60%),
    radial-gradient(70% 60% at 20% 100%, rgba(var(--xs-warm-pool), 0.15) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(190deg, #0C1A2A 0%, #060E18 58%, #0B1A29 100%);
}
.xs-poster--p6 {
  background-image:
    linear-gradient(108deg, rgba(255,255,255,0) 44%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 56%),
    radial-gradient(70% 90% at 80% 10%, rgba(var(--xs-ice-pool), 0.30) 0%, rgba(var(--xs-ice-pool), 0) 62%),
    radial-gradient(60% 70% at 10% 90%, rgba(var(--xs-warm-pool), 0.14) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    radial-gradient(120% 70% at 50% 120%, #10263C 0%, rgba(16, 38, 60, 0) 70%),
    linear-gradient(170deg, #0D1B2B 0%, #060E18 55%, #0A1A2A 100%);
}
.xs-poster--p7 {
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 44%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 56%),
    radial-gradient(70% 80% at 30% 20%, rgba(var(--xs-ice-pool), 0.30) 0%, rgba(var(--xs-ice-pool), 0) 60%),
    radial-gradient(50% 60% at 88% 88%, rgba(var(--xs-warm-pool), 0.15) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(160deg, #0C1A2A 0%, #070F19 58%, #0B1826 100%);
}
.xs-poster--p8 {
  background-image:
    linear-gradient(98deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 58%),
    radial-gradient(80% 80% at 70% 90%, rgba(var(--xs-ice-pool), 0.28) 0%, rgba(var(--xs-ice-pool), 0) 62%),
    radial-gradient(50% 60% at 14% 14%, rgba(var(--xs-warm-pool), 0.14) 0%, rgba(var(--xs-warm-pool), 0) 60%),
    linear-gradient(185deg, #0D1B2B 0%, #060E18 55%, #0B1826 100%);
}
.xs-film {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 1;
}
.xs-poster.is-playing .xs-film { opacity: 1; }
/* A film with a poster frame shows it at once (the hero): its first picture, not a blank. */
.xs-film[poster] { opacity: 1; }
.xs-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 140ms ease, opacity 200ms ease;
}
.xs-play:hover { background: rgba(255, 255, 255, 0.12); }
.xs-play:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 4px; }
.xs-play svg { width: 24px; height: 24px; margin-left: 4px; }
.xs-poster.is-playing .xs-play,
.xs-poster.is-starting .xs-play { opacity: 0; pointer-events: none; }
.xs-poster.is-playing:hover .xs-play { opacity: 1; pointer-events: auto; }
.xs-frame--compact .xs-play { width: 64px; height: 64px; }
.xs-frame--compact .xs-play svg { width: 20px; height: 20px; margin-left: 3px; }
.xs-bar {
  position: absolute;
  left: 18px; right: 18px; bottom: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 2;
}
.xs-bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 17%;
  border-radius: 2px;
  background: var(--xs-ice);
}
.xs-frame--compact .xs-bar { left: 22px; right: 22px; bottom: 20px; }
.xs-bar { transition: opacity 200ms ease; }
.xs-poster.is-playing .xs-bar, .xs-poster.is-starting .xs-bar { opacity: 0; }
/* Sound on: offered only when a film that has sound had to start muted. */
.xs-sound {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 12, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.88);
  font: inherit; font-size: 12.5px; letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 2;
  transition: background 140ms ease;
}
.xs-sound:hover { background: rgba(7, 12, 18, 0.75); }
.xs-sound:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 3px; }
.xs-sound svg { width: 16px; height: 16px; flex: none; }
.xs-caption {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xs-t3);
}

/* ── Section rhythm: a quarter more air than the first concept ─────────── */
.xs-section { position: relative; padding: 72px 0; }
.xs-section--tight { padding: 72px 0; }

/* Product, "In every plan": what each firm has switched on at set-up, one row each (as the roadmap's list) */
.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 rgba(255, 255, 255, 0.08); }
.xs-features__list li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); scroll-margin-top: 96px; }
.xs-features__name { margin: 0; font-family: var(--xs-sans); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; color: var(--xs-t1); }
.xs-features__list p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--xs-t3); }
.xs-features__more { margin: 28px 0 0; font-size: 16px; }
.xs-features__more a { color: var(--xs-ice); font-weight: 500; }
/* The French landing page (/fr): a lead under the motto, and the demo button */
.xs-fr-lead { max-width: 640px; margin: 22px auto 0; }
.xs-fr-cta { margin: 32px 0 18px; }
.xs-head { max-width: 820px; }
.xs-head h2 { font-size: 36px; }
.xs-head--center { margin: 0 auto; text-align: center; }
.xs-head .xs-lead { margin-top: 20px; }

/* Tones, so the page breathes: one section bluer, one lighter */
.xs-tone--blue { background: linear-gradient(180deg, rgba(14, 32, 52, 0) 0%, rgba(14, 32, 52, 0.55) 40%, rgba(14, 32, 52, 0.55) 60%, rgba(14, 32, 52, 0) 100%); }
.xs-tone--light { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.024) 30%, rgba(255, 255, 255, 0.024) 70%, rgba(255, 255, 255, 0) 100%); }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.xs-hero {
  position: relative;
  margin-top: calc(-1 * var(--xs-header-h));
  padding: calc(var(--xs-header-h) + 40px) 0 56px;
  text-align: center;
}
.xs-hero .xs-pool--ice { width: 1500px; height: 900px; left: 50%; top: -220px; transform: translateX(-50%); }
.xs-hero .xs-pool--warm { width: 900px; height: 700px; right: -260px; top: 520px; }
/* The mark: a fifth larger, on the dark ground, with a soft white light
   behind it so its lighter upper half reads. Never recoloured. */
.xs-mark { position: relative; width: 56px; height: 56px; margin: 0 auto 36px; }
.xs-mark::before {
  content: "";
  position: absolute;
  inset: -84px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0));
}
.xs-mark img { position: relative; width: 56px; height: 56px; }
.xs-hero h1 { font-size: min(44px, calc((100vw - 32px) / 11.2)); font-weight: 440; max-width: 1100px; margin: 0 auto; }

/* The homepage's first film breaks out of the column from 900 px: wider
   than the text above it, so the hero reads as film first. */
.xs-hero .xs-frame { margin: 40px 0 0; }

/* Product hero: the mark with its halo above the motto, one colour, the
   film as a large screen to the right (only the homepage's first film sits
   below its text). */
.xs-hero--split { text-align: left; padding-bottom: 72px; }
.xs-hero--split .xs-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.xs-hero--split h1 { font-size: min(42px, calc((100vw - 32px) / 11.2)); margin: 0; }
.xs-hero--split .xs-lead { margin-top: 26px; max-width: 420px; font-size: 17px; }
.xs-hero--split .xs-frame { margin: 0; }
.xs-mark--left { margin: 0 0 28px; }

/* How the intelligence works: the flow, then the three workflows as rows
   with Theo beside them */
.xs-intel__body { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; margin-top: 40px; }
.xs-irows { margin: 0; }
.xs-irow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xs-irow:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xs-irow dt { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; color: var(--xs-t1); }
.xs-irow dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--xs-t3); }
.xs-intel__body .xs-ecard--theo { margin-top: 22px; padding: 26px 26px 24px; }

/* A short list of facts under a band's copy: one ice tick-rule each */
.xs-detail { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 440px; }
.xs-detail li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--xs-t2); }
.xs-detail li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 1px; background: var(--xs-ice); }

/* Plain page heads (pricing, roadmap) */
.xs-hero--page { text-align: left; padding-bottom: 48px; }
.xs-hero--page h1 { font-size: 42px; margin: 18px 0 0; max-width: 900px; }
.xs-hero--page .xs-lead { margin-top: 20px; max-width: 560px; font-size: 18px; }

/* ── Two-column text and film ──────────────────────────────────────────── */
.xs-two { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.xs-two__text h2 { font-size: 36px; }
.xs-two__text .xs-lead { margin-top: 18px; }
.xs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 30px 0 40px; padding: 0; list-style: none; }
.xs-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--xs-line);
  background: var(--xs-card);
  box-shadow: inset 0 1px 0 var(--xs-line-hi);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--xs-t2);
}
.xs-points { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.xs-point { display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 500; color: var(--xs-t2); }
.xs-point i {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 13px;
  border: 1px solid var(--xs-line);
  background: var(--xs-card);
  box-shadow: inset 0 1px 0 var(--xs-line-hi);
  display: grid;
  place-items: center;
  color: var(--xs-ice);
}
.xs-point svg { width: 20px; height: 20px; }

#analysed .xs-pool--ice { width: 1200px; height: 1000px; left: -500px; top: -150px; }
#analysed .xs-pool--warm { width: 800px; height: 800px; right: -300px; bottom: -200px; }

/* ── Module bands ──────────────────────────────────────────────────────── */
.xs-modules { position: relative; padding-top: 72px; }
.xs-modules__head { margin-bottom: 56px; }
.xs-modules__head h2 { font-size: 36px; }
.xs-band { position: relative; padding: 72px 0; }
.xs-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.11) 18%, rgba(255,255,255,0.11) 82%, rgba(255,255,255,0) 100%);
}
.xs-band .xs-pool--ice { width: 1100px; height: 900px; left: -400px; top: -100px; }
.xs-band--flip .xs-pool--ice { left: auto; right: -400px; }
.xs-band .xs-pool--warm { width: 700px; height: 700px; right: -200px; bottom: -200px; }
.xs-band--flip .xs-pool--warm { right: auto; left: -200px; }
.xs-band .xs-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.xs-grid__text h3 { font-size: 30px; margin: 20px 0 20px; max-width: 520px; }
.xs-grid__text .xs-body { max-width: 440px; }
.xs-grid__text .xs-body + .xs-body { margin-top: 14px; }
.xs-grid__text .xs-chips { margin: 28px 0 26px; }
.xs-note { margin-top: 26px; font-size: 14px; color: var(--xs-t4); }
.xs-note b { font-weight: 600; color: var(--xs-t3); }

/* ── How it works: its own section, its own tone, no numbered discs.
   Three columns on a lighter ground, each opened by a short ice rule. ─── */
.xs-how { position: relative; padding: 72px 0; }
.xs-how::before, .xs-how::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 20%, rgba(255,255,255,0.10) 80%, rgba(255,255,255,0) 100%);
}
.xs-how::before { top: 0; }
.xs-how::after { bottom: 0; }
.xs-how .xs-pool--ice { width: 1300px; height: 900px; left: 50%; top: 20px; transform: translateX(-50%); }
.xs-how__head { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: end; }
.xs-how__head h2 { font-size: 36px; }
.xs-how__head .xs-lead { max-width: 440px; justify-self: start; }
.xs-how__steps { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
.xs-how__step { position: relative; padding: 26px 0 0; }
.xs-how__step::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 2px;
  border-radius: 2px;
  background: var(--xs-ice);
}
.xs-how__step h3 { font-family: var(--xs-serif); font-size: 28px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xs-how__step p { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--xs-t3); max-width: 300px; }
.xs-how__step small { display: block; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--xs-t4); }

/* ── Trial card: a champagne rule along its top edge, champagne figures ── */
.xs-trial-wrap { padding: 24px 0 88px; }
.xs-trial {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 44px 20px 36px;
  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 80px 160px -60px rgba(0, 0, 0, 0.9),
    0 30px 60px -40px rgba(0, 0, 0, 0.8);
  text-align: center;
  overflow: hidden;
}
.xs-trial::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, rgba(201, 179, 126, 0) 0%, rgba(201, 179, 126, 0.75) 22%, rgba(201, 179, 126, 0.75) 78%, rgba(201, 179, 126, 0) 100%);
}
.xs-trial .xs-pool--ice { width: 1200px; height: 700px; left: 50%; top: -420px; transform: translateX(-50%); }
.xs-trial .xs-pool--warm { width: 700px; height: 500px; right: -250px; bottom: -250px; }
.xs-trial__in { position: relative; z-index: 1; }
.xs-trial h2 { font-size: 28px; line-height: 1.12; letter-spacing: -0.012em; max-width: 780px; margin: 22px auto 0; }
.xs-count { display: flex; justify-content: center; align-items: flex-start; gap: 6px; margin: 32px 0 28px; }
.xs-count__unit { min-width: 56px; }
.xs-count__unit b {
  display: block;
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--xs-champagne);
}
.xs-count__unit span {
  display: block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--xs-t3);
}
.xs-count__sep { font-size: 28px; font-weight: 300; line-height: 1; color: rgba(201, 179, 126, 0.45); padding-top: 4px; }
.xs-trial__tier { font-size: 16px; color: var(--xs-t3); margin-bottom: 34px; }
.xs-trial.is-ended .xs-count { display: none; }
.xs-trial__ended { display: none; margin: 40px 0 34px; font-size: 16px; color: var(--xs-t3); }
.xs-trial.is-ended .xs-trial__ended { display: block; }
.xs-trial.is-ended .xs-trial__tier { display: none; }

/* ── Product: built around the matter (the screen silhouette the owner
   likes, beside its captions) ──────────────────────────────────────────── */
.xs-overview { padding: 32px 0 88px; }
.xs-overview .xs-pool--ice { width: 1300px; height: 900px; left: 50%; top: 120px; transform: translateX(-50%); }
.xs-overview .xs-pool--warm { width: 800px; height: 600px; left: -300px; bottom: -100px; }
.xs-overview .xs-two { grid-template-columns: 1fr; }
.xs-overview h2 { font-size: 36px; }
.xs-captions { display: grid; gap: 14px; margin: 40px 0 0; padding: 0; list-style: none; }
.xs-captions li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--xs-t3);
}
.xs-captions li::before { content: ""; width: 22px; height: 1px; background: rgba(255, 255, 255, 0.18); }
.xs-captions li:first-child { color: var(--xs-t1); }
.xs-captions li:first-child::before { background: var(--xs-ice); }
/* Faint interface silhouette inside the overview poster (6 to 10 percent white) */
.xs-ui { position: absolute; inset: 0; pointer-events: none; }
.xs-ui i { display: block; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.xs-ui__top { position: absolute; left: 0; right: 0; top: 0; height: 9%; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; padding: 0 5%; gap: 3%; }
.xs-ui__top .xs-ui__dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); }
.xs-ui__top .xs-ui__title { width: 30%; height: 8px; background: rgba(255, 255, 255, 0.09); }
.xs-ui__top .xs-ui__pill { margin-left: auto; width: 12%; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); }
.xs-ui__tabs { position: absolute; left: 5%; right: 5%; top: 13%; height: 5%; display: flex; gap: 5%; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.xs-ui__tabs i { width: 10%; height: 7px; margin-top: 6px; }
.xs-ui__tabs i.on { background: rgba(255, 255, 255, 0.11); }
.xs-ui__side { position: absolute; left: 5%; top: 24%; width: 24%; display: grid; gap: 4%; }
.xs-ui__side i { height: 7px; }
.xs-ui__main { position: absolute; left: 33%; right: 5%; top: 23%; bottom: 13%; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); padding: 4% 4%; display: grid; align-content: start; gap: 3%; }
.xs-ui__main i { height: 7px; }
.xs-ui__main i.h { width: 28%; height: 10px; background: rgba(255, 255, 255, 0.10); margin-bottom: 2%; }
.xs-ui__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin: 1% 0 3%; }
.xs-ui__cards i { height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.06); }

/* ── Product: matter intelligence (the five steps as plain text, vertical,
   the film as a short screen to the right) ────────────────────────────── */
.xs-matter { padding: 88px 0; }
.xs-matter .xs-pool--ice { width: 1200px; height: 1100px; left: -520px; top: 80px; }
.xs-matter .xs-pool--warm { width: 800px; height: 800px; right: -320px; top: 700px; }
.xs-opener { max-width: 960px; }
.xs-opener h2 { font-size: 36px; margin-top: 22px; }
.xs-lifecycle { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-top: 56px; }
.xs-steps { margin: 0; padding: 0; list-style: none; }
.xs-steps li { padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xs-steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xs-steps h3 { font-family: var(--xs-serif); font-size: 26px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xs-steps p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--xs-t3); }

/* How the intelligence works */
.xs-intel { margin-top: 88px; }
.xs-intel .xs-head { margin: 0 auto 40px; }
.xs-intel .xs-head h3 { font-size: 32px; }
.xs-flow { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.xs-node {
  min-height: 72px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid var(--xs-line);
  background: var(--xs-card);
  box-shadow: inset 0 1px 0 var(--xs-line-hi), 0 30px 60px -40px rgba(0,0,0,0.8);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--xs-t1);
}
.xs-node--hub { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.045); }
.xs-flow__link { position: relative; display: grid; place-items: center; height: 40px; color: rgba(255, 255, 255, 0.45); }
.xs-flow__link::before { content: ""; position: absolute; left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: rgba(255, 255, 255, 0.14); }
.xs-flow__link svg { position: relative; width: 12px; height: 12px; background: var(--xs-bg1); transform: rotate(90deg); }
.xs-engines { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.xs-engines__drop { display: none; position: absolute; left: calc((100% - 120px) * 0.375 + 40px); top: -64px; width: 1px; height: 36px; background: rgba(255, 255, 255, 0.14); }
.xs-engines__bracket {
  display: none;
  position: absolute;
  left: 0;
  width: calc((100% - 48px) * 0.75 + 32px);
  top: -28px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.xs-engines__bracket::before, .xs-engines__bracket::after { content: ""; position: absolute; bottom: -14px; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.14); }
.xs-engines__bracket::before { left: -1px; }
.xs-engines__bracket::after { right: -1px; }
.xs-ecard { padding: 22px 24px 20px; border-radius: 16px; border: 1px solid var(--xs-line); background: var(--xs-card); box-shadow: inset 0 1px 0 var(--xs-line-hi); }
.xs-ecard b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--xs-t1); }
.xs-ecard span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--xs-t3); }
.xs-ecard--theo { border: 1px dashed rgba(var(--xs-ice-rgb), 0.42); background: rgba(var(--xs-ice-rgb), 0.03); box-shadow: none; }
.xs-ecard--theo b { color: var(--xs-ice); }

/* Anonymiser visual */
.xs-redact {
  position: relative;
  padding: 26px 22px;
  border-radius: 22px;
  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);
}
.xs-redact .xs-eyebrow { margin-bottom: 22px; }
.xs-redact p { font-size: 17px; line-height: 1.9; color: var(--xs-t2); }
.xs-ph {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 11px;
  margin: 0 2px;
  border-radius: 8px;
  border: 1px solid rgba(var(--xs-ice-rgb), 0.32);
  background: rgba(var(--xs-ice-rgb), 0.07);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--xs-ice);
  vertical-align: middle;
  white-space: nowrap;
  transform: translateY(-2px);
}

/* ── Hyperlinks, site-wide: ice on hover, a hairline underline. Applies to
   links in running text on every public page (the dark pages and the pages
   a later restyle gives the theme). Buttons, the chrome and the frames
   carry their own link rules. ─────────────────────────────────────────── */
.xs-page main a:not([class]),
.xs-page main a.xs-link,
body:not(.xs-page) main a:not([class]),
a.xs-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(var(--xs-ice-rgb), 0.45);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.xs-page main a:not([class]):hover,
.xs-page main a.xs-link:hover,
body:not(.xs-page) main a:not([class]):hover,
a.xs-link:hover {
  color: var(--xs-ice);
  text-decoration-color: var(--xs-ice);
}
.xs-page main a:not([class]):focus-visible,
a.xs-link:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: 3px; border-radius: 2px; }

/* ── The pages that keep their Counsel body for now ───────────────────────
   The user guide's sticky contents rail sits under the site header. The
   join, forgot-password and reset-password panes show the mark with its
   halo and the motto on their dark side panel, no trust lines (prompt 004). */
.ug-body { --ug-header-h: var(--xs-header-h); }
.au-side .xs-brand { align-self: flex-start; }
.au-side .xs-mark--aside { margin: auto 0 28px; }
.xs-aside-motto { margin: 0; font-family: var(--xs-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: rgba(243, 250, 255, 0.74); }

/* ── Roadmap list ──────────────────────────────────────────────────────── */
.xs-roadmap { padding: 20px 0 200px; }
.xs-roadmap ol { margin: 0; padding: 0; list-style: none; max-width: 900px; }
.xs-roadmap li { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.xs-roadmap li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.xs-roadmap h2 { font-family: var(--xs-serif); font-size: 28px; font-weight: 450; letter-spacing: -0.01em; color: var(--xs-t1); }
.xs-roadmap p { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--xs-t3); max-width: 620px; }
.xs-status { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--xs-line); background: var(--xs-card); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--xs-t3); white-space: nowrap; }
.xs-status--soon { border-color: rgba(var(--xs-ice-rgb), 0.42); color: var(--xs-ice); }

/* ── Larger screens ─────────────────────────────────────────────────────
   Each block adds to the phone rules above. Inside a block, a rule that
   overrides another of the same weight keeps its original order (the split
   and page heroes after the hero, the flipped bands after the bands). */

/* Large phones and small tablets */
@media (min-width: 600px) {
  :root { --xs-gutter: 24px; }
  .xs-lead { font-size: 19px; }
  .xs-body { font-size: 18px; }
  .xs-point { font-size: 18px; }
  .xs-frame { padding: 10px; border-radius: 22px; }
  .xs-frame::before { inset: 8px; border-radius: 14px; }
  .xs-poster { border-radius: 13px; }
  .xs-play { width: 78px; height: 78px; }
  .xs-bar { left: 28px; right: 28px; bottom: 24px; }

  .xs-hero { padding: calc(var(--xs-header-h) + 56px) 0 120px; }
  .xs-hero h1 { font-size: min(56px, calc((100vw - 48px) / 11.4)); }
  .xs-hero .xs-frame { margin: 48px 0 0; }
  .xs-hero--split .xs-frame { margin: 0; }
  .xs-hero--split { padding-bottom: 100px; }
  .xs-hero--split .xs-hero__grid { gap: 48px; }
  .xs-hero--split h1 { font-size: min(48px, calc((100vw - 48px) / 11.4)); }
  .xs-hero--split .xs-lead { font-size: 19px; }
  .xs-hero--page { padding-bottom: 72px; }
  .xs-hero--page h1 { font-size: 50px; margin-top: 22px; }
  .xs-hero--page .xs-h1-eyebrow > .xs-eyebrow { margin-bottom: 22px; }
  .xs-features .xs-head h2 { margin-top: 24px; }
  .xs-hero--page .xs-lead { margin-top: 26px; font-size: 20px; }

  .xs-section { padding: 120px 0; }
  .xs-section--tight { padding: 120px 0; }
  .xs-two, .xs-band .xs-grid, .xs-lifecycle { gap: 48px; }
  .xs-two__text h2, .xs-head h2, .xs-opener h2, .xs-how__head h2 { font-size: 44px; }
  .xs-grid__text h3 { font-size: 34px; margin: 24px 0 24px; }
  .xs-modules { padding-top: 100px; }
  .xs-modules__head { margin-bottom: 80px; }
  .xs-overview { padding: 40px 0 120px; }
  .xs-overview h2 { font-size: 46px; }
  .xs-band { padding: 96px 0; }
  .xs-how { padding: 100px 0; }
  .xs-how__steps { margin-top: 56px; }
  .xs-how__step { padding-top: 30px; }
  .xs-how__step h3 { font-size: 32px; }
  .xs-matter { padding: 120px 0; }
  .xs-intel { margin-top: 120px; }
  .xs-intel .xs-head h3 { font-size: 36px; }
  .xs-engines { grid-template-columns: 1fr 1fr; }

  .xs-trial-wrap { padding: 40px 0 140px; }
  .xs-trial { padding: 56px 28px 48px; border-radius: 22px; }
  .xs-trial h2 { font-size: 32px; }
  .xs-count { gap: 10px; margin: 40px 0 32px; }
  .xs-count__unit { min-width: 64px; }
  .xs-count__unit b { font-size: 44px; }
  .xs-count__unit span { margin-top: 14px; letter-spacing: 0.2em; }
  .xs-count__sep { font-size: 32px; padding-top: 6px; }

  .xs-footer { padding: 56px 0 32px; }
  .xs-footer__grid { gap: 36px 24px; }
  .xs-footer__bottom { margin-top: 44px; }

  #dialog-login.xs-login {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px));
    height: auto;
    max-height: calc(100dvh - 32px);
    overscroll-behavior: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 80px 160px -60px rgba(0, 0, 0, 0.95),
      0 30px 60px -30px rgba(0, 0, 0, 0.8);
  }
  .xs-login__inner { padding: 44px 40px 36px; }
  #dialog-login.xs-login .dialog__close { top: 10px; right: 10px; }
  .xs-login__mark { margin-bottom: 18px; }
  .xs-login__motto { margin-bottom: 44px; }
}

/* Tablets and up: the desktop header, two columns, the full rhythm */
@media (min-width: 900px) {
  .xs-features__list li { grid-template-columns: 250px 1fr; gap: 12px 24px; padding: 18px 0; }
  :root { --xs-header-h: 84px; --xs-gutter: 40px; }
  .xs-skip { display: block; min-height: 0; padding: 8px 14px; }
  .xs-header__in { grid-template-columns: 1fr auto 1fr; }
  .xs-nav { display: flex; }
  .xs-header__right .xs-header__login { display: inline-block; }
  .xs-header__right .xs-btn { display: inline-flex; }
  .xs-burger { display: none; }
  .xs-mobile, body.xs-nav-open .xs-mobile { display: none; }

  .xs-hero { padding: calc(var(--xs-header-h) + 92px) 0 188px; }
  .xs-hero h1 { font-size: min(74px, calc((100vw - 80px) / 11.6)); }
  .xs-hero .xs-frame { margin: 76px -60px 0; }
  .xs-hero--split .xs-frame { margin: 0; }
  .xs-hero--split { padding-bottom: 150px; }
  /* The motto runs the full width on two lines and the film sits below it, larger (owner, 11 Oct) */
  .xs-hero--split .xs-hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .xs-hero--split h1 { font-size: min(64px, calc((100vw - 80px) / 11.6)); }
  .xs-mark--left { margin: 0 0 34px; }
  .xs-hero--page { padding-bottom: 96px; }
  .xs-hero--page h1 { font-size: 62px; }

  .xs-intel__body { grid-template-columns: 1.6fr 1fr; gap: 48px; margin-top: 56px; }
  .xs-irow { grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; }

  .xs-section { padding: 200px 0; }
  .xs-section--tight { padding: 120px 0; }
  .xs-two { grid-template-columns: 1fr 1.1fr; gap: 84px; }
  .xs-two--flip .xs-two__text { order: 2; }
  .xs-modules { padding-top: 162px; }
  .xs-modules__head { margin-bottom: 140px; }
  .xs-band { padding: 150px 0; }
  .xs-band .xs-grid { grid-template-columns: 1fr 1.25fr; gap: 84px; }
  .xs-band--flip .xs-grid { grid-template-columns: 1.25fr 1fr; }
  .xs-band--flip .xs-grid__text { order: 2; }

  .xs-how { padding: 150px 0 160px; }
  .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, 1fr); gap: 0; margin-top: 84px; }
  .xs-how__step { padding: 30px 40px 0 0; }
  .xs-how__step + .xs-how__step { padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, 0.08); }
  .xs-how__step + .xs-how__step::before { left: 40px; }

  .xs-trial-wrap { padding: 76px 0 226px; }
  .xs-trial { padding: 84px 72px 76px; border-radius: 28px; }
  .xs-trial h2 { font-size: 40px; line-height: 1.1; }
  .xs-count { gap: 26px; margin: 56px 0 44px; }
  .xs-count__unit { min-width: 112px; }
  .xs-count__unit b { font-size: 76px; }
  .xs-count__sep { font-size: 56px; padding-top: 8px; }

  .xs-overview { padding: 60px 0 200px; }
  .xs-overview .xs-two { grid-template-columns: 0.8fr 1.3fr; }
  .xs-ui__cards i { height: 44px; }

  .xs-matter { padding: 200px 0; }
  .xs-lifecycle { grid-template-columns: 1fr 1.15fr; gap: 84px; margin-top: 96px; }
  .xs-intel { margin-top: 200px; }
  .xs-intel .xs-head { margin: 0 auto 70px; }
  .xs-intel .xs-head h3 { font-size: 42px; }
  .xs-flow { grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; }
  .xs-node { min-height: 96px; }
  .xs-flow__link { height: auto; }
  .xs-flow__link::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .xs-flow__link svg { transform: none; }
  .xs-engines { grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
  .xs-engines__drop, .xs-engines__bracket { display: block; }

  .xs-redact { padding: 34px 38px 36px; }
  .xs-redact p { font-size: 20px; line-height: 2; }

  .xs-roadmap li { grid-template-columns: 1fr auto; gap: 24px 40px; padding: 40px 0; }
  .xs-roadmap h2 { font-size: 34px; }

  .xs-footer { padding: 84px 0 44px; }
  .xs-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
  .xs-footer__brand { grid-column: auto; }
  .xs-footer__grid > :nth-child(2) { grid-row: auto; }
  .xs-footer__tag { margin: 26px 0 34px; }
  .xs-footer__brand a { display: block; min-height: 0; margin-top: 10px; }
  .xs-footer__col h2 { margin: 0 0 24px; padding-bottom: 14px; }
  .xs-footer__col a { display: block; width: fit-content; min-height: 0; margin-bottom: 14px; }
  .xs-footer__bottom { margin: 70px 0 0; padding-top: 28px; }

  /* The sign-in card at desktop size: 36 px close, 46 px fields */
  #dialog-login.xs-login .dialog__close { font-size: 16px; width: 36px; height: 36px; top: 14px; right: 14px; }
  #dialog-login.xs-login .form-input { height: 46px; font-size: 15px; }
  #dialog-login.xs-login .form-input-wrapper__toggle { height: 46px; line-height: 46px; }
  #dialog-login.xs-login .form-link { display: inline; min-height: 0; margin-top: 2px; }
  #dialog-login.xs-login .form-checkbox { min-height: 0; }
  #dialog-login.xs-login .form-checkbox input {
    -webkit-appearance: auto;
    appearance: auto;
    width: 16px; height: 16px;
    margin: 0;
    background: none;
    accent-color: var(--xs-ice);
  }
  #dialog-login.xs-login .form-checkbox input:focus-visible { outline-offset: 2px; }
  #dialog-login.xs-login #form-two-step .xy-2s__more { gap: .35rem 1rem; }
  #dialog-login.xs-login #form-two-step .dialog__switch button {
    display: inline-block;
    min-height: 0;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
  #dialog-login.xs-login #form-two-step .dialog__switch button:hover { border-bottom-color: var(--xs-ice); }
}

/* Desktop: the full type scale */
@media (min-width: 1200px) {
  .xs-hero h1 { font-size: 84px; }
  .xs-hero--split h1 { font-size: 72px; }
  .xs-hero--page h1 { font-size: 74px; }
  .xs-two__text h2 { font-size: 54px; }
  .xs-head h2, .xs-opener h2, .xs-how__head h2 { font-size: 56px; }
  .xs-modules__head h2 { font-size: 60px; }
  .xs-grid__text h3 { font-size: 40px; }
  .xs-overview h2 { font-size: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .xs-menu__panel, .xs-menu__scrim, .xs-film, .xs-play, .xs-burger i, .xs-mobile__chev { transition: none; }
}

/* ── Lead copy reads a size up on wide screens (prompt 038) ── */
@media (min-width: 900px) {
  .xs-lead { font-size: 18px; }
}

/* ── The tagline is always two lines (owner, 11 Oct): "Legal intelligence,"
   then "built around your practice." The second line never wraps. ── */
.xs-motto-l2 { white-space: nowrap; }

/* ── Drawings in place of films (owner, 11 Oct; prompt 041) ──────────────
   Vector drawings in the house line style sit in the same frame a film
   would. Still by default; gentle motion only while a drawing is on screen
   (main.js adds .is-in) and only if the person has not asked for less. ── */
.xs-draw {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 30% 20%, rgba(167, 198, 219, 0.10), rgba(167, 198, 219, 0) 70%),
    radial-gradient(50% 60% at 85% 90%, rgba(201, 179, 126, 0.06), rgba(201, 179, 126, 0) 70%),
    linear-gradient(180deg, #0C1824 0%, #08111A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.xs-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .xs-draw.is-in .d-climb { animation: xsd-climb 7s cubic-bezier(.45, .05, .25, 1) infinite; }
  .xs-draw.is-in .d-speed { animation: xsd-speed 7s ease-in-out infinite; }
  .xs-draw.is-in .d-glow { animation: xsd-glow 3.6s ease-in-out infinite; }
  .xs-draw.is-in .d-hand { transform-origin: 78px 70px; animation: xsd-spin 7s linear infinite; }
  .xs-draw.is-in .d-beam { animation: xsd-beam 4.2s ease-in-out infinite alternate; }
  .xs-draw.is-in .d-row,
  .xs-draw.is-in .d-chip { animation: xsd-light 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.45s); }
  .xs-draw.is-in .d-drop { animation: xsd-drop 6s cubic-bezier(.3, .7, .3, 1) infinite; }
  .xs-draw.is-in .d-write { stroke-dasharray: 1; animation: xsd-write 7s ease-out infinite; animation-delay: calc(var(--i, 0) * 0.35s); }
  .xs-draw.is-in .d-pen { animation: xsd-pen 7s ease-in-out infinite; }
  .xs-draw.is-in .d-ask { animation: xsd-light 7s ease-in-out infinite; }
  .xs-draw.is-in .d-lens { animation: xsd-lens 6s cubic-bezier(.45, .05, .25, 1) infinite; }
  .xs-draw.is-in .d-found { animation: xsd-found 6s ease-in-out infinite; }
  .xs-draw.is-in .d-flow { animation: xsd-flow 2.4s linear infinite; }
  .xs-draw.is-in .d-mark { animation: xsd-glow 4s ease-in-out infinite; }
  .xs-draw.is-in .d-orbit { transform-origin: 240px 150px; animation: xsd-spin 26s linear infinite; }
  .xs-draw.is-in .d-nudge { animation: xsd-nudge 3s ease-in-out infinite; }
  .xs-draw.is-in .d-tick { transform-origin: 404px 222px; animation: xsd-tick 7s ease-out infinite; }
  .xs-draw.is-in .d-travel { animation: xsd-travel 8s cubic-bezier(.45, .05, .25, 1) infinite; }
  .xs-draw.is-in .d-step { animation: xsd-step 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.4s); }
}
@keyframes xsd-climb { 0% { transform: translate(-140px, 72px); opacity: 0; } 12% { opacity: 1; } 62%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes xsd-speed { 0%, 12% { opacity: 0; } 30%, 55% { opacity: 0.55; } 70%, 100% { opacity: 0; } }
@keyframes xsd-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes xsd-spin { to { transform: rotate(360deg); } }
@keyframes xsd-beam { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes xsd-light { 0% { opacity: 0.25; } 18%, 82% { opacity: 1; } 100% { opacity: 0.25; } }
@keyframes xsd-drop { 0% { transform: translateY(-34px); opacity: 0; } 22%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes xsd-write { 0% { stroke-dashoffset: 1; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes xsd-pen { 0% { transform: translate(-84px, -92px); opacity: 0; } 10% { opacity: 1; } 55%, 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes xsd-lens { 0% { transform: translateY(-64px); } 45%, 100% { transform: translateY(0); } }
@keyframes xsd-found { 0%, 35% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes xsd-flow { to { stroke-dashoffset: -16; } }
@keyframes xsd-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes xsd-tick { 0%, 45% { transform: scale(0.4); opacity: 0; } 60%, 100% { transform: scale(1); opacity: 1; } }
@keyframes xsd-travel { 0% { transform: translateX(0); } 88%, 100% { transform: translateX(352px); } }
@keyframes xsd-step { 0%, 4% { opacity: 0.55; } 10%, 70% { opacity: 1; } 100% { opacity: 0.55; } }
/* The homepage film is its own control (owner, 15 Oct: no play button on it):
   a tap or click pauses and resumes it, and Space does once it has focus. */
.xs-poster[data-autoplay] { cursor: pointer; }
.xs-poster[data-autoplay] .xs-film:focus-visible { outline: 2px solid var(--xs-ice); outline-offset: -4px; }