/* public/theme/xwerp/public.css - the public site's own rules (the pages before
   sign-in, #/pages/public/*), loaded after flow.css (vite.config.ts).
   ============================================
   Moved out of index.html's inline <style> on 22-Oct-2026, rule for rule, so
   the HTML every visitor downloads stops carrying them and the browser can
   cache them. Everything here is scoped to .xwerp-public or a public class.
   ============================================ */

/* The public site's light, in the 22-Oct-2026 landing palette: indigo,
   amber and cyan glows behind the type, headlines in the text colour. */
.xwerp-public-bar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, #818cf8 34%, transparent);
}
.xwerp-public-bar > .xwui-box-container,
.xwerp-public-bar .xwui-container {
  flex: 1 1 auto;
  width: 100%;
  max-width: 75rem;
}
.xwerp-public header.xwui-bar-site-header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  width: 100%;
}
.xwerp-public .xwui-bar-site-header__inner {
  min-height: 4.25rem;
  align-items: center;
  width: 100%;
  max-width: none;
}
.xwerp-public .xwui-bar-site-header__links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-inline-start: 1.25rem;
}
.xwerp-public a.xwui-bar-site-header__link {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-weight: 600;
}
.xwerp-public .xwui-bar-site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-inline-start: auto;
}
@media (min-width: 861px) {
  .xwerp-public header.xwui-bar-site-header {
    padding-inline: 0 !important;
  }
}
/* The footer band is the full-bleed bar. The component's own fill only
   covers the centred column, which left a white gap on each side. */
#xwerp-public-footer {
  background: var(--bg-secondary);
  border-top: 1px solid color-mix(in srgb, #818cf8 28%, transparent);
}
#xwerp-public-footer .xwui-bar-site-footer {
  background: transparent !important;
  border: 0 !important;
  width: 100%;
  max-width: none;
  padding-inline: 0;
  box-sizing: border-box;
}
/* Early access: a centered invitation, tinted fact cards, a letter, then a close. */
.xwerp-public-invite #xwerp-public-top .xwui-container {
  margin-inline: auto;
}
.xwerp-public-invite #xwerp-public-top h1,
.xwerp-public-invite #xwerp-public-top h1 .xwui-typography,
.xwerp-public-invite #xwerp-public-top p,
.xwerp-public-invite #xwerp-public-top p .xwui-typography {
  text-align: center;
}
.xwerp-public-invite #xwerp-public-top .xwui-stack {
  align-items: center;
  justify-content: center;
  width: 100%;
}
.xwerp-public-invite #xwerp-public-why {
  background:
    linear-gradient(
      115deg,
      color-mix(in srgb, #818cf8 16%, var(--bg-primary)),
      color-mix(in srgb, #f59e0b 11%, var(--bg-primary)) 52%,
      color-mix(in srgb, #22d3ee 14%, var(--bg-primary))
    );
  border-block: 1px solid color-mix(in srgb, #818cf8 32%, transparent);
}
.xwerp-public-invite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}
.xwerp-public-invite-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  box-sizing: border-box;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 1.1rem;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--area-hue, #818cf8) 14%, var(--bg-primary)),
      var(--bg-primary) 7rem
    );
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 48%, var(--border-color));
  border-inline-start: 3px solid var(--area-hue, #818cf8);
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--area-hue, #4338ca) 14%, transparent);
}
.xwerp-public-invite-card h3,
.xwerp-public-invite-card h3 .xwui-typography {
  margin: 0;
  color: var(--area-ink, #4338ca);
}
.xwerp-public-invite-card p {
  margin: 0;
  line-height: 1.45;
}
.xwerp-public-invite-mail {
  border-radius: 1.15rem;
  border: 1px solid color-mix(in srgb, #818cf8 42%, transparent);
  border-inline-start: 3px solid #f59e0b;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, #818cf8 10%, var(--bg-primary)),
      var(--bg-primary) 9rem
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f59e0b 26%, transparent),
    0 1.25rem 2.8rem color-mix(in srgb, #4338ca 14%, transparent);
  overflow: hidden;
}
.xwerp-public-invite-mail .xwui-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.xwerp-public-invite-actions,
.xwerp-public-invite-actions .xwui-stack-wrapper,
.xwerp-public-invite-actions .xwui-stack {
  display: flex;
  width: 100% !important;
  justify-content: flex-end !important;
  align-items: center;
}
.xwerp-public-invite-faq .xwui-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.xwerp-public-invite-faq .xwui-accordion-item {
  margin: 0;
  overflow: hidden;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, #818cf8 34%, transparent);
  border-inline-start: 3px solid #818cf8;
  background: color-mix(in srgb, var(--bg-primary) 96%, #312e81);
  box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, #4338ca 8%, transparent);
}
.xwerp-public-invite-faq .xwui-accordion-item:nth-child(3n + 2) {
  border-color: color-mix(in srgb, #f59e0b 42%, transparent);
  border-inline-start-color: #f59e0b;
}
.xwerp-public-invite-faq .xwui-accordion-item:nth-child(3n) {
  border-color: color-mix(in srgb, #22d3ee 40%, transparent);
  border-inline-start-color: #22d3ee;
}
.xwerp-public-invite-faq .xwui-accordion-header {
  background: transparent;
}
.xwerp-public-invite-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
  width: min(75rem, 100%);
  margin-inline: auto;
  padding: 0 var(--spacing-md, 1rem) var(--spacing-3xl, 3rem);
  box-sizing: border-box;
  align-items: stretch;
}
.xwerp-public-invite-pair > .xwerp-public-band,
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container {
  display: flex;
  height: 100%;
  min-height: 100%;
}
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container {
  flex: 1;
  width: 100%;
}
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container > .xwui-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 1.35rem 1.4rem !important;
  border-radius: 1.15rem;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, #818cf8 12%, var(--bg-primary)),
      var(--bg-primary) 8rem
    );
  border: 1px solid color-mix(in srgb, #818cf8 40%, transparent);
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, #4338ca 12%, transparent);
}
.xwerp-public-invite-pair > #xwerp-public-more > .xwui-box-container > .xwui-container {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, #f59e0b 14%, var(--bg-primary)),
      var(--bg-primary) 8rem
    );
  border-color: color-mix(in srgb, #f59e0b 48%, transparent);
}
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container > .xwui-container > div,
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container > .xwui-container > div > .xwui-stack-wrapper,
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container > .xwui-container > div > .xwui-stack-wrapper > .xwui-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.xwerp-public-invite-pair > .xwerp-public-band > .xwui-box-container > .xwui-container > div > .xwui-stack-wrapper > .xwui-stack > .xwui-stack-item:last-child {
  margin-top: auto;
}
.xwerp-public a.xwui-bar-site-header__link.is-active {
  background: color-mix(in srgb, #818cf8 14%, transparent) !important;
  color: #4338ca !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #818cf8 55%, transparent);
}
.xwerp-public {
  background-color: var(--bg-primary);
  background-image:
    radial-gradient(ellipse 48rem 32rem at 8% -8%, color-mix(in srgb, var(--accent-primary) 42%, transparent), transparent 68%),
    radial-gradient(ellipse 36rem 26rem at 96% 4%, color-mix(in srgb, #f59e0b 38%, transparent), transparent 64%),
    radial-gradient(ellipse 32rem 24rem at 72% 22%, color-mix(in srgb, #22d3ee 28%, transparent), transparent 70%);
  background-attachment: fixed;
}
#xwerp-public-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.xwerp-public-area {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 1.25rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-hue, var(--accent-primary)) 12%, var(--bg-primary)),
      var(--bg-primary) 7.5rem
    );
  border: 1px solid color-mix(in srgb, var(--area-hue, var(--accent-primary)) 48%, var(--border-color));
  border-inline-start: 3px solid var(--area-hue, #818cf8);
  box-shadow: 0 1.15rem 2.75rem color-mix(in srgb, var(--area-hue, #4338ca) 16%, transparent);
}

.xwerp-public-area .xwui-card {
  flex: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.xwerp-public-area-about,
.xwerp-public-module-line {
  margin: 0;
  line-height: 1.4;
}
.xwerp-public-area-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  color: var(--area-hue, #818cf8);
  background: color-mix(in srgb, var(--area-hue, #818cf8) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 70%, transparent);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--area-hue, #818cf8) 42%, transparent);
}
.xwerp-public-area-tile .xwui-icon,
.xwerp-public-area-tile svg {
  color: var(--area-hue, #818cf8);
  stroke: var(--area-hue, #818cf8);
}
.xwerp-public-area-name,
.xwerp-public-area-name .xwui-typography,
.xwerp-public-module-name,
.xwerp-public-module-name .xwui-typography,
.xwerp-public-area .xwerp-public-area-explore,
.xwerp-public-area .xwerp-public-area-explore a,
.xwerp-public-area .xwerp-public-area-explore button {
  color: var(--area-ink, #4338ca);
}
.xwerp-public-module-name {
  font-weight: 700;
}
.xwerp-public-area-media {
  height: 6.75rem;
  flex: none;
  background-image: url("/landing/areas.jpg");
  background-size: cover;
  background-position: center;
}
.xwerp-public-area[data-area="finance"] .xwerp-public-area-media { background-position: 0% 35%; }
.xwerp-public-area[data-area="people"] .xwerp-public-area-media { background-position: 55% 70%; filter: hue-rotate(14deg) saturate(1.15); }
.xwerp-public-area[data-area="sales"] .xwerp-public-area-media { background-position: 100% 15%; filter: hue-rotate(-16deg) saturate(1.2); }
.xwerp-public-area[data-area="supply-chain"] .xwerp-public-area-media { background-position: 72% 85%; filter: hue-rotate(26deg); }
.xwerp-public-area[data-area="operations"] .xwerp-public-area-media { background-position: 18% 90%; filter: saturate(1.25); }
.xwerp-public-area[data-area="governance"] .xwerp-public-area-media { background-position: 88% 45%; filter: hue-rotate(38deg) brightness(0.92); }
.xwerp-public-area[data-area="intelligence"] .xwerp-public-area-media { background-position: 40% 0%; filter: hue-rotate(-6deg) saturate(1.3); }
.xwerp-public-area[data-area="platform"] .xwerp-public-area-media { background-position: 12% 8%; filter: hue-rotate(8deg); }
.xwerp-public-claim {
  padding: 0.8rem 0.95rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--bg-primary) 94%, #312e81);
  border: 1px solid color-mix(in srgb, #22d3ee 42%, transparent);
  border-inline-start: 3px solid #22d3ee;
}
.xwerp-public-claim[data-status="progress"] {
  border-color: color-mix(in srgb, #fbbf24 55%, transparent);
  border-inline-start-color: #fbbf24;
}
.xwerp-public-claim[data-status="built"] {
  border-inline-start-color: #818cf8;
}
.xwerp-public-claim-detail {
  margin: 0;
  margin-inline-start: calc(2.35rem + var(--spacing-sm, 0.5rem));
  line-height: 1.4;
}
.xwerp-public-claim-head,
.xwerp-public-claim-head > .xwui-stack {
  width: 100%;
}
.xwerp-public-claim-copy { flex: 1 1 auto; min-width: 0; }
.xwerp-public-claim-head .xwui-stack-item:last-child {
  margin-inline-start: auto;
  flex: none;
}
.xwerp-public-claim-status { flex: none; }
.xwerp-public-claim-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  color: var(--claim-hue, #818cf8);
  background: color-mix(in srgb, var(--claim-hue, #818cf8) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--claim-hue, #818cf8) 78%, transparent);
  box-shadow: 0 0 1.1rem color-mix(in srgb, var(--claim-hue, #818cf8) 48%, transparent);
}
.xwerp-public-claim-tile .xwui-icon,
.xwerp-public-claim-tile svg {
  color: var(--claim-hue, #818cf8);
  stroke: var(--claim-hue, #818cf8);
}
.xwerp-public-plan-intro,
.xwerp-public-plan-intro .xwui-typography {
  text-align: center;
}
.xwerp-public-plan-intro {
  max-width: 40rem;
  margin-inline: auto;
}
.xwerp-public-plan {
  max-width: 40rem;
  margin-inline: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .xwerp-public-plan.is-playing .xwui-timeline__item {
    animation: xwerp-plan-step 0.55s ease both;
  }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(1) { animation-delay: 0.05s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(2) { animation-delay: 0.4s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(3) { animation-delay: 0.75s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(4) { animation-delay: 1.1s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(5) { animation-delay: 1.45s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(6) { animation-delay: 1.8s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(7) { animation-delay: 2.15s; }
  .xwerp-public-plan.is-playing .xwui-timeline__item:nth-child(8) { animation-delay: 2.5s; }
}
@keyframes xwerp-plan-step {
  from { opacity: 0; transform: translateY(0.85rem); }
  to { opacity: 1; transform: none; }
}
.xwerp-public-invoice {
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, #818cf8 48%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f59e0b 28%, transparent),
    0 1.4rem 3.2rem color-mix(in srgb, #4338ca 20%, transparent);
}
.xwerp-public-marquee {
  overflow: hidden;
  max-width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.xwerp-public-marquee-track {
  display: flex;
  gap: 0.75rem;
  width: max-content;
}
.xwerp-public-chip {
  flex: none;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--area-ink, #4338ca);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-hue, #818cf8) 62%, #fff),
      color-mix(in srgb, var(--area-hue, #818cf8) 34%, #fff)
    );
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 78%, #fff);
  box-shadow:
    0 0.45rem 1.15rem color-mix(in srgb, var(--area-hue, #818cf8) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent);
}
.xwerp-public-kernel-contracts {
  width: 100%;
}
.xwerp-public-kernel-contracts .xwui-tag,
.xwerp-public-kernel-contracts .xwui-chip {
  color: var(--area-ink, #4338ca) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-hue, #818cf8) 58%, #fff),
      color-mix(in srgb, var(--area-hue, #818cf8) 30%, #fff)
    ) !important;
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 72%, #fff) !important;
  box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--area-hue, #818cf8) 32%, transparent);
  font-weight: 700;
}
.xwerp-public-kernel-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
  gap: 0.75rem;
  align-items: stretch;
}
.xwerp-public-kernel-rule,
.xwerp-public-kernel-rule > .xwui-box-container,
.xwerp-public-kernel-rule .xwui-box {
  height: 100%;
}
.xwerp-public-kernel-rule .xwui-box {
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 48%, transparent) !important;
  border-inline-start: 3px solid var(--area-hue, #818cf8) !important;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--area-hue, #818cf8) 16%, var(--bg-primary)),
      var(--bg-primary) 6.5rem
    ) !important;
  box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--area-hue, #4338ca) 14%, transparent);
}
.xwerp-public-kernel-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: max-content;
  height: 1.7rem;
  padding-inline: 0.55rem;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--area-ink, #4338ca);
  background: color-mix(in srgb, var(--area-hue, #818cf8) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--area-hue, #818cf8) 70%, transparent);
}
.xwerp-public-kernel-mark .xwui-typography {
  color: var(--area-ink, #4338ca);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.xwerp-public-kernel-code .xwui-codeblock {
  position: relative;
  padding-top: 3.1rem;
}
.xwerp-public-kernel-code .xwui-codeblock-copy {
  position: absolute;
  top: 0.55rem;
  inset-inline-end: 0.55rem;
  z-index: 1;
}
.xwerp-public-kernel-code .xwui-codeblock,
.xwerp-public-kernel-code .xwui-code-block {
  border-radius: 1.05rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #818cf8 42%, transparent);
  border-inline-start: 3px solid #f59e0b;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, #818cf8 10%, var(--bg-primary)),
      var(--bg-primary) 8rem
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #f59e0b 24%, transparent),
    0 1rem 2.2rem color-mix(in srgb, #4338ca 14%, transparent);
}
.xwerp-public-rail {
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--accent-primary) 55%, transparent) transparent;
}
.xwerp-public-rail-track {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md, 1rem);
  width: max-content;
  padding-block: 0.25rem;
}
.xwerp-public-rail-track > .xwerp-public-area {
  width: min(22rem, 78vw);
  flex: none;
  align-self: stretch;
  height: auto;
  scroll-snap-align: start;
}
.xwerp-public-rail-track > .xwerp-public-area > .xwui-box-container,
.xwerp-public-rail-track > .xwerp-public-area > .xwui-card,
.xwerp-public-rail-track > .xwerp-public-area .xwui-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.xwerp-public-rail .xwui-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.xwerp-public-area-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.xwerp-public-area-body > .xwui-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.xwerp-public-area-body .xwui-stack-item:last-child {
  margin-top: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .xwerp-public-band {
    opacity: 0;
    transform: translateY(1.1rem);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .xwerp-public-band.is-shown {
    opacity: 1;
    transform: none;
  }

  .xwerp-public-marquee-track { animation: xwerp-marquee 36s linear infinite; }
  
  .xwerp-public-band.is-shown .xwerp-public-area,
  .xwerp-public-band.is-shown .xwui-sg-item {
    animation: xwerp-public-rise 0.7s ease both;
  }
  
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(2),
  .xwerp-public-band.is-shown .xwui-sg-item:nth-child(2) { animation-delay: 0.08s; }
  
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(3),
  .xwerp-public-band.is-shown .xwui-sg-item:nth-child(3) { animation-delay: 0.16s; }
  .xwerp-public-band.is-shown .xwui-sg-item:nth-child(4),
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(4) { animation-delay: 0.24s; }
  .xwerp-public-band.is-shown .xwui-sg-item:nth-child(5),
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(5) { animation-delay: 0.32s; }
  .xwerp-public-band.is-shown .xwui-sg-item:nth-child(6),
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(6) { animation-delay: 0.4s; }
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(7) { animation-delay: 0.48s; }
  .xwerp-public-band.is-shown .xwerp-public-area:nth-child(8) { animation-delay: 0.56s; }
}
@keyframes xwerp-public-rise {
  from { opacity: 0; transform: translateY(0.7rem); }
  to { opacity: 1; transform: none; }
}
@keyframes xwerp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html[dir="rtl"] .xwerp-public-marquee-track { animation-direction: reverse; }
/* Dark ground: the same lights, bloomed and dimmer, so amber stays a lamp
   and not a stain. */
html[data-theme="dark"] .xwerp-public-bar {
  background: color-mix(in srgb, #0d1018 94%, transparent);
  border-bottom-color: color-mix(in srgb, #a5b4fc 28%, transparent);
}
html[data-theme="dark"] .xwerp-public a.xwui-bar-site-header__link.is-active {
  background: color-mix(in srgb, #a5b4fc 14%, transparent) !important;
  color: #a5b4fc !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #a5b4fc 55%, transparent);
}
html[data-theme="dark"] .xwerp-public-area {
  --area-ink: color-mix(in srgb, var(--area-hue, #a5b4fc) 82%, #fff);
}
html[data-theme="dark"] .xwerp-public-chip {
  --area-ink: color-mix(in srgb, var(--area-hue, #a5b4fc) 62%, #fff) !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-hue, #a5b4fc) 78%, #0a0c12),
      color-mix(in srgb, var(--area-hue, #a5b4fc) 42%, #0a0c12)
    );
  border-color: color-mix(in srgb, var(--area-hue, #a5b4fc) 88%, #fff);
  box-shadow:
    0 0 1.35rem color-mix(in srgb, var(--area-hue, #a5b4fc) 70%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}
html[data-theme="dark"] .xwerp-public-invite-card,
html[data-theme="dark"] .xwerp-public-kernel-rule,
html[data-theme="dark"] .xwerp-public-kernel-contracts .xwui-stack-item {
  --area-ink: color-mix(in srgb, var(--area-hue, #a5b4fc) 78%, #fff) !important;
}
html[data-theme="dark"] .xwerp-public-kernel-contracts .xwui-tag,
html[data-theme="dark"] .xwerp-public-kernel-contracts .xwui-chip {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-hue, #a5b4fc) 70%, #0a0c12),
      color-mix(in srgb, var(--area-hue, #a5b4fc) 36%, #0a0c12)
    ) !important;
  border-color: color-mix(in srgb, var(--area-hue, #a5b4fc) 85%, #fff) !important;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--area-hue, #a5b4fc) 55%, transparent);
}

html[data-theme="dark"] .xwerp-public {
  background-image:
    radial-gradient(ellipse 52rem 36rem at 0% -6%, color-mix(in srgb, #22d3ee 28%, transparent), transparent 70%),
    radial-gradient(ellipse 40rem 28rem at 100% 0%, color-mix(in srgb, #fbbf24 14%, transparent), transparent 66%),
    radial-gradient(ellipse 38rem 28rem at 68% 36%, color-mix(in srgb, #818cf8 20%, transparent), transparent 72%);
}

html[data-theme="dark"] .xwerp-public-claim {
  background: color-mix(in srgb, #312e81 22%, var(--bg-primary));
  border-color: color-mix(in srgb, #a5b4fc 38%, transparent);
  border-inline-start-color: #a5b4fc;
}
html[data-theme="dark"] .xwerp-public-claim[data-status="progress"] {
  background: color-mix(in srgb, #312e81 22%, var(--bg-primary));
  border-color: color-mix(in srgb, #fbbf24 48%, transparent);
  border-inline-start-color: #fbbf24;
}
html[data-theme="dark"] .xwerp-public-claim-tile {
  background: color-mix(in srgb, var(--claim-hue, #a5b4fc) 30%, transparent);
  box-shadow: 0 0 1.15rem color-mix(in srgb, var(--claim-hue, #a5b4fc) 55%, transparent);
}
html[data-theme="dark"] .xwerp-public-invoice {
  background: color-mix(in srgb, #3730a3 22%, var(--bg-primary));
  border-color: color-mix(in srgb, #a5b4fc 40%, transparent);
}
/* The public landing takes the xwflow depth: a near-black ground, neon
   light behind the hero, and glass cards that share one edge. The words
   and the figures stay the ones the page already renders. */
body:has(.xwerp-public) {
  background: #0a0c12;
}
.xwerp-public {
  --bg-primary: #0a0c12;
  --bg-secondary: #141826;
  --text-primary: #f3f4f8;
  --text-secondary: #a6acc4;
  --border-color: rgba(255, 255, 255, 0.12);
  --accent-primary: #818cf8;
  color-scheme: dark;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse 52rem 28rem at 12% -8%, rgba(99, 102, 241, 0.2), transparent 62%),
    radial-gradient(ellipse 42rem 26rem at 92% 0%, rgba(232, 121, 249, 0.12), transparent 58%),
    radial-gradient(ellipse 36rem 22rem at 70% 36%, rgba(34, 211, 238, 0.06), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0) 0 0 / 3px 3px,
    #0a0c12;
}
.xwerp-public .xwui-typography {
  color: var(--text-primary);
}

.xwerp-public .xwerp-public-bar {
  background: color-mix(in srgb, #0a0c12 78%, transparent);
  border-bottom-color: color-mix(in srgb, #818cf8 35%, transparent);
}
.xwerp-public a.xwui-bar-site-header__link {
  color: #f3f4f8;
}

.xwerp-public .xwerp-public-area .xwui-card,
.xwerp-public #xwerp-public-saudi .xwui-card,
.xwerp-public #xwerp-public-access .xwui-card {
  background: #141826;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--text-primary);
}

.xwerp-public #xwerp-public-footer {
  background: #0d1018;
  border-top-color: color-mix(in srgb, #818cf8 28%, transparent);
}


/* ============================================
   THE LANDING'S LOOK ON EVERY PUBLIC PAGE (22-Oct-2026 design): the same
   gradient primary, ghost secondary, night cards that lift, mono eyebrows
   and Sora headings the home page draws (flow.css "public landing"), on the
   XWUI parts the other pages are built from. Scoped to the page body, so the
   header and footer keep "public chrome".
   ============================================ */
.xwerp-public main .xwui-typography-h1,
.xwerp-public main .xwui-typography-h2,
.xwerp-public main .xwui-typography-h3,
.xwerp-public main .xwui-typography-h4 { font-family: var(--xwerp-font-display, "Sora", system-ui, sans-serif); letter-spacing: -0.01em; }
.xwerp-public main .xwui-typography-overline { font-family: var(--font-family-mono, "Geist Mono", monospace); letter-spacing: 0.06em; color: #818cf8 !important; }
:root[lang="ar"] .xwerp-public main .xwui-typography-overline { font-family: inherit; letter-spacing: 0; }
.xwerp-public main .xwui-typography-body1,
.xwerp-public main .xwui-typography-body2,
.xwerp-public main p.xwui-typography { color: #a6acc4; }

:root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary {
  border: 0 !important;
  border-radius: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #22d3ee 100%) !important;
  background-size: 160% 160% !important;
  box-shadow: 0 12px 30px -10px rgba(99, 102, 241, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.2s ease;
}
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary,
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary * { color: #fff !important; }
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary:hover { transform: translateY(-2px); background-position: 100% 50% !important; box-shadow: 0 16px 36px -10px rgba(168, 85, 247, 0.6); }
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-outline {
  border-radius: 12px;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-outline,
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-outline * { color: #f3f4f8 !important; }
:root[data-theme] .xwerp-public main .xwui-button.xwui-button-outline:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.18) !important; }

.xwerp-public main .xwui-card {
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.xwerp-public main .xwui-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--area-hue, #6366f1) 45%, transparent);
}
.xwerp-public main a:not(.xwui-button) { color: #818cf8; }
/* XWUI's primary tag fills with the accent, and white on the light indigo
   reads 2.98:1; the deeper indigo reads 6.3:1 (WCAG 1.4.3). */
:root[data-theme] .xwerp-public main .xwui-tag-primary { background: #4f46e5 !important; border-color: #4f46e5 !important; }
:root[data-theme] .xwerp-public main .xwui-tag-primary,
:root[data-theme] .xwerp-public main .xwui-tag-primary * { color: #fff !important; }
.xwerp-public main a:not(.xwui-button):hover { color: #c4cbff; }

@media (prefers-reduced-motion: reduce) {
  .xwerp-public main .xwui-card,
  :root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary { transition: none !important; }
  .xwerp-public main .xwui-card:hover,
  :root[data-theme] .xwerp-public main .xwui-button.xwui-button-primary:hover { transform: none; }
}

/* The public site's hues (src/pages/nextgen/public/tint.ts names them; the 22-Oct-2026 landing palette): a bright
   stop and an ink that reads on the dark ground. Moved out of tint.ts and saudi.ts on 27-Oct-2026 so source files name
   a token and the theme layer owns the value. */
:root {
  --xwerp-site-indigo: #818cf8;
  --xwerp-site-indigo-ink: #c7d2fe;
  --xwerp-site-cyan: #22d3ee;
  --xwerp-site-cyan-ink: #a5f3fc;
  --xwerp-site-violet: #a78bfa;
  --xwerp-site-violet-ink: #ddd6fe;
  --xwerp-site-green: #34d399;
  --xwerp-site-green-ink: #a7f3d0;
  --xwerp-site-amber: #f59e0b;
  --xwerp-site-amber-ink: #fde68a;
  --xwerp-site-pink: #f472b6;
  --xwerp-site-pink-ink: #fbcfe8;
  --xwerp-site-orange: #fb923c;
  --xwerp-site-orange-ink: #fed7aa;
  --xwerp-site-magenta: #e879f9;
  --xwerp-site-magenta-ink: #f5d0fe;
  --xwerp-site-blue: #60a5fa;
  --xwerp-site-blue-ink: #bfdbfe;
  --xwerp-site-claim-rtl: #2ee6c7;
  --xwerp-site-claim-dates: #14b8a6;
  --xwerp-site-claim-zatca: #fbbf24;
  --xwerp-site-claim-vat: #5eead4;
  --xwerp-site-claim-payroll: #f59e0b;
}