/* =========================================================================
   Xuite — site stylesheet
   Palette and type derived from the XUITE brand guide (July 2026).
   ========================================================================= */

:root{
  --plum:#3B0764;
  --plum-deep:#2A0548;
  --violet:#6D28D9;
  --violet-lift:#7C3AED;
  --violet-soft:#EDE7FB;
  --violet-line:#D9CBF5;
  --charcoal:#3A3A45;
  --charcoal-soft:#6B6B78;
  --paper:#FCFAFF;
  --mist:#F2F2F5;

  --display:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shell:1160px;
  --gut:clamp(20px,5vw,48px);
  --band:clamp(72px,9vw,132px);
}

/* ===== Base ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(109,40,217,.18);color:var(--charcoal);
  font-family:var(--ui);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--violet-lift);outline-offset:3px;border-radius:2px}
.x-skip{
  position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--plum);
  padding:.7rem 1.1rem;z-index:99;font-weight:600;border-radius:0 0 8px 0;
}
.x-skip:focus{left:0}

.x-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.x-band{padding-block:var(--band)}
.x-band--tight{padding-block:clamp(52px,6vw,84px)}
.x-band--dark{background-color:var(--plum);color:var(--paper)}
.x-band--soft{background-color:var(--violet-soft)}

/* ===== Type ============================================================ */
.x-eyebrow{
  font-family:var(--ui);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1.4rem;padding-bottom:.9rem;color:var(--violet);
  border-bottom:1px solid var(--violet-line);
}
.x-band--dark .x-eyebrow,.x-hero .x-eyebrow,.x-phead .x-eyebrow{
  border-bottom-color:rgba(217,203,245,.26);
}
.x-band--dark .x-eyebrow,.x-hero .x-eyebrow{color:var(--violet-line)}

.x-h1{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(2.5rem,6.2vw,4.4rem);font-weight:600;
  line-height:1.04;letter-spacing:-.022em;margin:0;
}
.x-h1--sm{font-size:clamp(2.1rem,4.6vw,3.3rem)}
.x-h2{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(1.85rem,3.6vw,2.9rem);font-weight:600;
  line-height:1.14;letter-spacing:-.017em;margin:0;
}
.x-h3{
  font-family:var(--display);font-size:1.2rem;font-weight:600;
  line-height:1.3;letter-spacing:-.008em;margin:0 0 .5rem;
}
.x-lede{font-size:1.12rem;line-height:1.62;color:var(--charcoal-soft);margin:0;max-width:52ch}
.x-band--dark .x-lede{color:#C9B8E4}

.x-secthead{display:grid;grid-template-columns:1.02fr .98fr;gap:1.4rem 4.5rem;align-items:end}
@media(max-width:860px){
  .x-secthead{grid-template-columns:1fr;gap:1rem;align-items:start}
}

/* ===== Buttons ========================================================= */
.x-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--ui);font-size:.95rem;font-weight:600;
  padding:.86rem 1.5rem;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.x-btn--solid{background:var(--violet);color:var(--paper)}
.x-btn--solid:hover{background:var(--violet-lift);transform:translateY(-1px)}
.x-btn--ghost{border-color:rgba(252,250,255,.34);color:var(--paper)}
.x-btn--ghost:hover{border-color:var(--paper);background:rgba(252,250,255,.08)}
.x-btn--onlight{border-color:var(--violet-line);color:var(--plum)}
.x-btn--onlight:hover{border-color:var(--violet);background:var(--violet-soft)}
.x-btn--paper{background:var(--paper);color:var(--plum)}
.x-btn--paper:hover{background:#fff;transform:translateY(-1px)}

/* ===== Logo ============================================================ */
.x-logo{display:inline-flex;align-items:center;text-decoration:none}
.x-logo svg{height:26px;width:auto}
.x-logo .lm-a{fill:var(--plum)}
.x-logo .lm-b{fill:var(--violet)}
.x-logo .lm-t{fill:var(--charcoal)}
.x-logo--invert .lm-a,.x-logo--invert .lm-b,.x-logo--invert .lm-t{fill:var(--paper)}

/* ===== Header ========================================================== */
.x-head{position:relative;z-index:20;padding-block:1.5rem}
.x-head__row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.x-nav{display:flex;align-items:center;gap:2rem}
.x-nav a{font-size:.92rem;font-weight:500;text-decoration:none;color:#D6C8EE;transition:color .16s ease}
.x-nav a:hover,.x-nav a[aria-current="page"]{color:var(--paper)}
.x-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.x-head__cta{flex-shrink:0}

.x-burger{
  display:none;background:none;border:0;padding:.4rem;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.x-burger span{display:block;width:22px;height:2px;background:var(--paper);position:relative}
.x-burger span::before,.x-burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--paper);
}
.x-burger span::before{top:-7px}
.x-burger span::after{top:7px}

@media(max-width:900px){
  .x-nav,.x-head__cta{display:none}
  .x-burger{display:inline-flex}
  .x-head__row.is-open + .x-menu{display:block}
  .x-menu{display:none;padding:1.4rem 0 .4rem}
  .x-menu a{
    display:block;padding:.72rem 0;font-size:1.02rem;font-weight:500;
    color:#D6C8EE;text-decoration:none;border-bottom:1px solid rgba(217,203,245,.18);
  }
  .x-menu .x-btn{margin-top:1.2rem;display:inline-flex;border-bottom:0}
}
@media(min-width:901px){.x-menu{display:none}}

/* ===== Hero (home) ===================================================== */
.x-hero{background-color:var(--plum);color:var(--paper);padding-bottom:clamp(70px,9vw,120px);position:relative;overflow:hidden}
.x-hero::after{
  content:"";position:absolute;inset:auto -12% -55% 40%;height:70%;
  background:radial-gradient(ellipse at center,rgba(109,40,217,.5),transparent 68%);
  pointer-events:none;
}
.x-hero__inner{position:relative;z-index:2;padding-top:clamp(48px,7vw,84px)}
.x-hero__under{
  display:grid;grid-template-columns:1.02fr .98fr;gap:2rem 4.5rem;align-items:start;
  margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid rgba(217,203,245,.22);
}
.x-hero__sub{margin:0;font-size:1.14rem;line-height:1.62;color:#CDBCE7}
.x-hero__aside{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.x-hero__acts{display:flex;flex-wrap:wrap;gap:.8rem}
.x-hero__note{margin:0;font-size:.95rem;color:#BCA7DC;max-width:44ch}
.x-hero__note b{color:var(--paper);font-weight:600}
@media(max-width:860px){.x-hero__under{grid-template-columns:1fr;gap:1.8rem}}

/* ===== Page head (interior pages) ====================================== */
.x-phead{background-color:var(--plum);color:var(--paper);padding-bottom:clamp(56px,7vw,88px);position:relative;overflow:hidden}
.x-phead::after{
  content:"";position:absolute;inset:auto -14% -60% 46%;height:74%;
  background:radial-gradient(ellipse at center,rgba(109,40,217,.44),transparent 68%);
  pointer-events:none;
}
.x-phead__inner{position:relative;z-index:2;padding-top:clamp(40px,5vw,64px)}
.x-phead__grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:1.6rem 4.5rem;align-items:end;
  margin-top:1.6rem;
}
.x-phead__grid p{margin:0;font-size:1.1rem;line-height:1.6;color:#CDBCE7}
@media(max-width:860px){.x-phead__grid{grid-template-columns:1fr;align-items:start}}

/* ===== Gap grid (home) ================================================= */
.x-gap{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem}
.x-gap__item{
  background:#fff;border:1px solid var(--violet-line);border-top:3px solid var(--violet-line);
  border-radius:14px;padding:1.7rem 1.6rem;
}
.x-gap__item p{margin:0;color:var(--charcoal-soft);font-size:1rem}
.x-gap__item--wide{grid-column:1/-1;border-top-color:var(--violet);background:var(--violet-soft)}
@media(max-width:760px){.x-gap{grid-template-columns:1fr;gap:2rem}}

/* ===== Track list (signature) ========================================== */
.x-tracks{margin-top:3.4rem;position:relative;padding-left:clamp(46px,7vw,88px)}
.x-tracks__rail{
  position:absolute;left:clamp(15px,2.4vw,30px);top:14px;bottom:14px;width:2px;
  background:var(--violet-line);border-radius:2px;overflow:hidden;
}
.x-tracks__fill{position:absolute;inset:0 0 auto 0;height:0;background:var(--violet);transition:height .35s cubic-bezier(.4,0,.2,1)}
.x-track{
  position:relative;padding:1.75rem 0;border-bottom:1px solid var(--violet-line);
  display:grid;grid-template-columns:auto minmax(190px,15rem) 1fr;gap:.35rem 2.6rem;align-items:start;
}
.x-track:last-child{border-bottom:0}
.x-track__no{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600;letter-spacing:.1em;color:var(--violet);padding-top:.32rem}
.x-track__ttl{margin:0;padding-top:.05rem}
.x-track__desc{margin:0;color:var(--charcoal-soft);font-size:1rem;padding-top:.2rem}
.x-track__dot{
  position:absolute;left:calc(-1 * clamp(46px,7vw,88px) + clamp(15px,2.4vw,30px) - 5px);
  top:2.2rem;width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--violet-line);
  transition:background-color .3s ease,border-color .3s ease;
}
.x-track.is-lit .x-track__dot{background:var(--violet);border-color:var(--violet)}
@media(max-width:860px){
  .x-track{grid-template-columns:auto 1fr;gap:.3rem 1.6rem}
  .x-track__desc{grid-column:2}
}
@media(max-width:560px){
  .x-track{grid-template-columns:1fr;gap:.25rem}
  .x-track__no{padding-top:0}
  .x-track__desc{grid-column:1}
}

/* ===== Stage detail (how it works) ===================================== */
.x-stage{
  display:grid;grid-template-columns:minmax(200px,17rem) 1fr;gap:1.4rem 4.5rem;
  padding-block:clamp(2.4rem,4vw,3.4rem);border-top:1px solid var(--violet-line);
}
.x-stage:first-of-type{border-top:0;padding-top:0}
.x-stage__no{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:600;letter-spacing:.1em;color:var(--violet);margin:0 0 .6rem}
.x-stage__lead{margin:0;font-size:1.05rem;color:var(--charcoal-soft)}
.x-stage__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 3rem;margin-top:1.8rem}
.x-stage__cols h4{
  font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin:0 0 .6rem;
}
.x-stage__cols ul{margin:0;padding:0;list-style:none}
.x-stage__cols li{position:relative;padding-left:1.4rem;margin-bottom:.55rem;font-size:.98rem}
.x-stage__cols li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--violet-line)}
@media(max-width:860px){
  .x-stage{grid-template-columns:1fr;gap:1rem}
  .x-stage__cols{grid-template-columns:1fr;gap:1.4rem}
}

/* ===== Why grid ======================================================== */
.x-why{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 4.5rem;margin-top:3.4rem}
.x-why__item{border-top:2px solid var(--violet);padding-top:1.15rem}
.x-why__item p{margin:0;color:#C4B2E0;font-size:1rem}
@media(max-width:760px){.x-why{grid-template-columns:1fr}}

/* ===== Fit columns ===================================================== */
.x-fit{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3.4rem}
.x-fit__col{padding:2rem;border-radius:16px}
.x-fit__col--yes{background:var(--violet-soft)}
.x-fit__col--no{background:var(--mist)}
.x-fit__col h3{margin-top:0}
.x-fit__col ul{margin:1rem 0 0;padding:0;list-style:none}
.x-fit__col li{position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:1rem;color:var(--charcoal)}
.x-fit__col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--violet)}
.x-fit__col--no li::before{background:#A3A3AE}
@media(max-width:760px){.x-fit{grid-template-columns:1fr}}

/* ===== Principles (about) ============================================== */
.x-princ{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem 3.4rem;margin-top:3.4rem}
.x-princ__item{border-top:2px solid var(--violet-line);padding-top:1.15rem}
.x-princ__item p{margin:0;color:var(--charcoal-soft);font-size:1rem}
@media(max-width:860px){.x-princ{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.x-princ{grid-template-columns:1fr}}

/* ===== Contact ========================================================= */
.x-contact{display:grid;grid-template-columns:1.02fr .98fr;gap:2.6rem 4.5rem;margin-top:3rem;align-items:start}
.x-contact__card{background:var(--violet-soft);border-radius:16px;padding:2.2rem}
.x-contact__card h3{margin-top:0}
.x-contact__mail{
  display:inline-block;font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:600;color:var(--plum);text-decoration:none;
  border-bottom:2px solid var(--violet-line);padding-bottom:2px;margin-top:.4rem;
  overflow-wrap:anywhere;
}
.x-contact__mail:hover{border-bottom-color:var(--violet)}
.x-contact ol{margin:1rem 0 0;padding-left:1.2rem}
.x-contact ol li{margin-bottom:.6rem;color:var(--charcoal-soft)}
.x-contact ol li b{color:var(--charcoal);font-weight:600}
@media(max-width:860px){.x-contact{grid-template-columns:1fr}}

/* ===== Prose (legal pages) ============================================= */
.x-prose{max-width:70ch}
.x-prose h2{
  font-family:var(--display);font-size:1.45rem;font-weight:600;line-height:1.25;
  letter-spacing:-.01em;margin:2.6rem 0 .8rem;color:var(--plum);
}
.x-prose h2:first-child{margin-top:0}
.x-prose h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:1.8rem 0 .5rem}
.x-prose p{margin:0 0 1rem}
.x-prose ul{margin:0 0 1.2rem;padding-left:1.3rem}
.x-prose li{margin-bottom:.5rem}
.x-prose a{color:var(--violet);text-underline-offset:3px}
/* retained for future use */
.x-note{
  background:var(--violet-soft);border-left:3px solid var(--violet);
  padding:1.1rem 1.3rem;border-radius:0 10px 10px 0;margin:0 0 2.4rem;font-size:.97rem;
}
.x-note p{margin:0}

/* ===== CTA + footer ==================================================== */
.x-cta{background-color:var(--violet);color:var(--paper);text-align:center}
.x-cta .x-h2{margin-inline:auto;max-width:16ch;color:var(--paper)}
.x-cta p{margin:1.1rem auto 0;max-width:52ch;color:#E9DEFB;font-size:1.08rem}
.x-cta .x-btn{margin-top:2rem}

.x-foot{background-color:var(--plum-deep);color:#A996C6;padding-block:3.2rem;font-size:.92rem}
.x-foot__row{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:center;justify-content:space-between}
.x-foot__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem 3rem;margin-bottom:2.8rem}
.x-foot__blurb{margin:1.2rem 0 1.6rem;max-width:38ch;color:#A996C6}
.x-foot h4{
  font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#D9CBF5;margin:0 0 1rem;
}
.x-foot__col a{display:block;padding:.32rem 0}
@media(max-width:760px){
  .x-foot__top{grid-template-columns:1fr 1fr;gap:2rem}
  .x-foot__brand{grid-column:1/-1}
}
@media(max-width:460px){
  .x-foot__top{grid-template-columns:1fr}
  .x-foot__legal{flex-direction:column;gap:.5rem}
}
.x-foot a{color:#C9B8E4;text-decoration:none}
.x-foot a:hover{color:var(--paper)}
.x-foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}
.x-foot__social{display:flex;gap:1.2rem;align-items:center}
.x-foot__legal{
  margin:2.4rem 0 0;padding-top:1.6rem;
  border-top:1px solid rgba(201,184,228,.18);font-size:.85rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;
}
.x-foot__legal p{margin:0}


/* ===== Statement band ================================================== */
.x-statement{background-color:var(--violet-soft)}
.x-statement__grid{
  display:grid;grid-template-columns:1.35fr .65fr;gap:1.6rem 4.5rem;align-items:end;
}
.x-statement p.x-statement__big{
  font-family:var(--display);font-optical-sizing:auto;
  font-size:clamp(1.55rem,3.3vw,2.45rem);font-weight:600;line-height:1.2;
  letter-spacing:-.016em;color:var(--plum);margin:0;
}
.x-statement p.x-statement__sub{margin:0;color:var(--charcoal-soft);font-size:1rem}
@media(max-width:860px){
  .x-statement__grid{grid-template-columns:1fr;align-items:start}
}

/* ===== FAQ ============================================================= */
.x-faq{margin-top:2.6rem;border-top:1px solid var(--violet-line)}
.x-faq details{border-bottom:1px solid var(--violet-line)}
.x-faq summary{
  font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--plum);
  cursor:pointer;list-style:none;padding:1.25rem 2.4rem 1.25rem 0;position:relative;
}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.7rem;width:13px;height:2px;
  background:var(--violet);
}
.x-faq summary::before{
  content:"";position:absolute;right:5.9px;top:1.35rem;width:2px;height:13px;
  background:var(--violet);transition:transform .2s ease;
}
.x-faq details[open] summary::before{transform:scaleY(0)}
.x-faq p{margin:0 0 1.25rem;color:var(--charcoal-soft);max-width:68ch}

/* ===== Diagrams ======================================================== */
.x-dia{margin-top:3rem;overflow-x:auto;overflow-y:hidden}
.x-dia svg{display:block;width:100%;height:auto;max-width:100%}
.x-dia__cap{
  margin:.9rem 0 0;font-size:.88rem;color:var(--charcoal-soft);
}
.x-band--dark .x-dia__cap{color:#BCA7DC}
/* below this width the labels would be unreadable if scaled, so the diagram
   keeps its size and the container scrolls sideways instead of vanishing */
@media(max-width:700px){
  .x-dia svg{width:660px;max-width:none}
}

/* ===== Social icons ==================================================== */
.x-soc{display:flex;gap:1.1rem;align-items:center}
.x-soc a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  border:1px solid rgba(201,184,228,.28);color:#C9B8E4;
  transition:border-color .18s ease,color .18s ease,background-color .18s ease;
}
.x-soc a:hover{border-color:var(--paper);color:var(--paper);background:rgba(252,250,255,.08)}
.x-soc svg{width:17px;height:17px;fill:currentColor}
.x-soc--light a{border-color:var(--violet-line);color:var(--plum)}
.x-soc--light a:hover{border-color:var(--violet);color:var(--violet);background:#fff}

/* ===== Reveal ========================================================== */
.x-rise{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.x-rise.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .x-rise{opacity:1;transform:none}
  .x-tracks__fill{height:100%!important}
}