/* =========================================================================
   X7 SUB-PAGES — shared design system
   Used by About, FAQs, Privacy and Terms (loaded after styles.css, before
   each page's own CSS). Same palette, type and components as the home
   page, so the whole site reads as one product:
     - black canvas, #0b0913 panels, hairline white edges
     - purple accent (#8b5cff / #6d3cff / #a78bff) and #36158b glows
     - Poppins, tight display headings, light body copy
     - the home CTA buttons (.tc-btn) reused as-is
   Scroll-reveal classes (.rv / .rv-words) come from styles.css; pages.js
   applies them. Everything here is prefixed sp- / lg- (legal) so nothing
   leaks into the home page.
   ========================================================================= */
:root{
  --x-ink:        #000000;
  --x-panel:      #0b0913;
  --x-panel-2:    #07060d;
  --x-edge:       rgba(255, 255, 255, 0.07);
  --x-edge-hi:    rgba(255, 255, 255, 0.16);
  --x-accent:     #8b5cff;
  --x-accent-deep:#6d3cff;
  --x-accent-soft:#a78bff;
  --x-glow:       #36158b;
  --x-title:      #ffffff;
  --x-body:       #b9b6cc;
  --x-muted:      #8b88a3;
  --x-radius:     clamp(14px, 1.5vw, 22px);
  --x-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* the home CTA buttons (.tc-btn) read these */
  --tc-accent:      #8b5cff;
  --tc-accent-soft: #a78bff;
  --tc-accent-deep: #6d3cff;
  --tc-panel:       #0b0913;
  --tc-edge:        rgba(255, 255, 255, 0.07);
  --tc-edge-hi:     rgba(255, 255, 255, 0.16);
  --tc-title:       #ffffff;
  --tc-body:        #b9b6cc;
  --tc-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.sp{ background: var(--x-ink); }
.sp ::selection{ background: rgba(139, 92, 255, 0.45); color: #fff; }

/* styles.css has a generic `section{display:flex; overflow:hidden; ...}`
   for the home page. Sub-page sections are plain blocks. */
.sp-main section{
  display: block;
  overflow: visible;
  height: auto;
  width: 100%;
  max-width: none;
  color: inherit;
}

.sp-wrap{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}

.sp-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sp-skip{
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 99999999999;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font: 500 0.9rem Poppins, sans-serif;
  text-decoration: none;
  translate: 0 -200%;
}
.sp-skip:not(:focus-visible){
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.sp-skip:focus-visible{ translate: 0 0; }

.sp-main :focus-visible,
.sp-hero :focus-visible{
  outline: 2px solid var(--x-accent-soft);
  outline-offset: 3px;
  border-radius: 8px;
}


/* footer: give the copyright line room at the bottom */
.sp .cover-section7{ padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- header / menu ---------- */
.sp-top{
  width: 100%;
  position: relative;
  background: var(--x-ink);
}
.sp-header{
  height: auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sp-nav{
  position: relative;
  z-index: 30;
  width: 100%;
  padding-top: 0.5rem;
}
/* logo: white on every sub-page (some pages' markup has the dark version) */
.sp .menu .logo img{ filter: brightness(0) invert(1) !important; }

/* mobile menu icon + sidebar header are dark by default in styles.css */
.sp .menu-icon p,
.sp .mobile-header{ color: #fff; }

/* current page in the menu */
.menu .nav a[aria-current="page"]{
  position: relative;
  color: #fff !important;
}
.menu .nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--x-accent);
  box-shadow: 0 0 10px var(--x-accent);
  translate: -50% 0;
}


/* ---------- hero ----------
   The background covers the whole header, menu included, so the menu is
   part of the hero instead of a strip above it. Back to front: a slow
   aurora, and at the bottom a glowing horizon with a 3D grid floor running
   towards you. Content on the left, a live visual on the right. While you
   scroll away the hero content eases back (CSS scroll-driven animation
   where supported). */
@property --x-angle{ syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.sp-hero{
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) 0 calc(clamp(140px, 18vw, 240px) + 1.5rem);
}
.sp-hero-bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.sp-aurora{
  position: absolute;
  inset: -30% -15% 12% 25%;
  background:
    radial-gradient(40% 45% at 30% 40%, rgba(109, 60, 255, 0.42), transparent 70%),
    radial-gradient(35% 40% at 70% 60%, rgba(54, 21, 139, 0.75), transparent 70%),
    radial-gradient(30% 35% at 55% 20%, rgba(167, 139, 255, 0.22), transparent 70%);
  filter: blur(30px);
  animation: sp-aurora 22s ease-in-out infinite alternate;
}
@keyframes sp-aurora{
  0%  { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-6%, 4%, 0) rotate(8deg) scale(1.08); }
  100%{ transform: translate3d(4%, -3%, 0) rotate(-6deg) scale(0.96); }
}
/* horizon + grid floor */
.sp-floor{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(140px, 18vw, 240px);
}
.sp-floor-plane{
  position: absolute;
  top: 0; bottom: 0;
  left: -60%; right: -60%;
  overflow: hidden;
  transform-origin: 50% 0%;
  transform: perspective(300px) rotateX(58deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 42%, transparent 88%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 42%, transparent 88%);
}
.sp-floor-grid{
  position: absolute;
  left: 0; right: 0;
  top: -56px; bottom: 0;
  background-image:
    linear-gradient(rgba(167, 139, 255, 0.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 255, 0.42) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  animation: sp-floor-run 3.2s linear infinite;
  will-change: transform;
}
@keyframes sp-floor-run{ to{ transform: translate3d(0, 56px, 0); } }
.sp-floor-glow{
  position: absolute;
  left: 50%; top: 0;
  width: min(1200px, 110vw);
  height: 220px;
  translate: -50% -58%;
  background: radial-gradient(50% 50% at 50% 55%, rgba(139, 92, 255, 0.5), rgba(109, 60, 255, 0.12) 55%, transparent 75%);
}
.sp-floor-line{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 3%, rgba(167, 139, 255, 0.55) 22%, #efe9ff 50%, rgba(167, 139, 255, 0.55) 78%, transparent 97%);
  box-shadow: 0 0 16px 1px rgba(139, 92, 255, 0.85), 0 0 50px 4px rgba(109, 60, 255, 0.35);
}
/* a spark that travels along the horizon */
.sp-floor-line::after{
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 16%;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(214, 200, 255, 0.7) 35%, transparent);
  transform: translateX(-100%);
  animation: sp-spark 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes sp-spark{
  0%  { transform: translateX(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100%{ transform: translateX(625%); opacity: 0; }
}

.sp-hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.sp-hero-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  min-width: 0;
}
.sp-hero-visual{
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  display: grid;
  place-items: center;
  animation: sp-float 7s ease-in-out infinite alternate;
}
@keyframes sp-float{ from{ translate: 0 -6px; } to{ translate: 0 8px; } }

/* 3D orbits behind the visual */
.sp-orbits{
  position: absolute;
  inset: -18% -22%;
  transform: perspective(1100px) rotateX(64deg) rotateZ(-14deg);
  pointer-events: none;
}
.sp-orbit{
  position: absolute;
  inset: var(--i, 0%);
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 255, 0.16);
  animation: sp-turn var(--d, 30s) linear infinite;
}
.sp-orbit::after{
  content: "";
  position: absolute;
  top: 50%; left: -4px;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #cbb8ff;
  box-shadow: 0 0 14px 3px rgba(167, 139, 255, 0.85);
}
.sp-orbit:nth-child(2){ animation-direction: reverse; border-style: dashed; border-color: rgba(167, 139, 255, 0.1); }
@keyframes sp-turn{ to{ rotate: 360deg; } }

/* glass card with a light running around its border */
.sp-hero-card{
  position: relative;
  width: 100%;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(22, 17, 38, 0.86), rgba(9, 7, 17, 0.92)) padding-box,
    conic-gradient(from var(--x-angle),
      rgba(167, 139, 255, 0.1) 0%, rgba(203, 184, 255, 0.95) 10%, rgba(109, 60, 255, 0.35) 22%,
      rgba(167, 139, 255, 0.1) 38%, rgba(167, 139, 255, 0.1) 100%) border-box;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 70px -20px rgba(109, 60, 255, 0.45);
  animation: sp-border 7s linear infinite;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s var(--x-ease);
}
@keyframes sp-border{ to{ --x-angle: 360deg; } }

.sp-crumb ol{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--x-muted);
}
.sp-crumb li + li::before{
  content: "/";
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.22);
}
.sp-crumb a{ color: var(--x-accent-soft); text-decoration: none; }
.sp-crumb a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.sp-crumb [aria-current]{ color: var(--x-body); }

.sp-title{
  font-family: Poppins, sans-serif;
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--x-title);
  max-width: 16ch;
  text-wrap: balance;
}
.sp-lead{
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--x-body);
  max-width: 58ch;
}
.sp-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

/* hero content eases back as you scroll away (2025+ browsers) */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .sp-hero-inner{
      animation: sp-hero-exit linear both;
      animation-timeline: scroll(root);
      animation-range: 0 75vh;
    }
    @keyframes sp-hero-exit{
      to{ opacity: 0.2; translate: 0 -7vh; scale: 0.97; }
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .sp-aurora, .sp-floor-grid, .sp-floor-line::after, .sp-hero-visual, .sp-orbit, .sp-hero-card{ animation: none !important; }
}

@media (max-width: 980px){
  .sp-hero-inner{ grid-template-columns: minmax(0, 1fr); }
  .sp-hero-visual{ width: min(100%, 420px); justify-self: start; }
}


/* ---------- shared content type ----------
   The body isn't flat black: a long, very soft column of colour runs down
   the page behind the content (fixed, so it drifts as you scroll), plus a
   faint star field and a hairline grid that both fade out at the edges.
   Every layer is decoration only -- z-index:-1, no pointer events -- so
   nothing here can catch a click or add scroll width. */
.sp-main{
  width: 100%;
  position: relative;
  isolation: isolate;
  font-family: Poppins, sans-serif;
}
.sp-main::before,
.sp-main::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* drifting colour + stars (fixed to the viewport, clipped to the content) */
.sp-main::before{
  position: fixed;
  background:
    radial-gradient(38vw 38vw at 88% 12%, rgba(109, 60, 255, 0.16), transparent 70%),
    radial-gradient(45vw 45vw at 6% 42%, rgba(54, 21, 139, 0.3), transparent 70%),
    radial-gradient(40vw 40vw at 82% 78%, rgba(139, 92, 255, 0.14), transparent 70%);
  animation: sp-drift 34s ease-in-out infinite alternate;
  clip-path: inset(0);
  will-change: transform;   /* its own layer: the page behind never repaints */
}
@keyframes sp-drift{
  from{ transform: translate3d(0, 0, 0) scale(1); }
  to  { transform: translate3d(0, -4%, 0) scale(1.12); }
}
/* stars: two sizes, faded towards the middle so text stays clean */
.sp-main::after{
  background-image:
    radial-gradient(1.6px 1.6px at 18% 12%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1.4px 1.4px at 72% 26%, rgba(200, 180, 255, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 34% 58%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.6px 1.6px at 88% 64%, rgba(200, 180, 255, 0.4), transparent),
    radial-gradient(1.2px 1.2px at 8% 82%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1.4px 1.4px at 58% 92%, rgba(200, 180, 255, 0.35), transparent);
  background-size: 620px 620px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 32%, transparent 68%, #000 100%);
  opacity: 0.8;
  animation: sp-twinkle 9s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes sp-twinkle{ from{ opacity: 0.45; } to{ opacity: 0.95; } }

/* hairline grid, drawn on the section that asks for it */
.sp-mesh{ position: relative; isolation: isolate; }
.sp-mesh::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(167, 139, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 139, 255, 0.16) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at var(--mesh-x, 50%) 50%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 60% at var(--mesh-x, 50%) 50%, #000, transparent 72%);
}
/* a soft lamp behind a section; place with --lamp-x / --lamp-y */
.sp-lamp{ position: relative; isolation: isolate; }
.sp-lamp::after{
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* vertical bleed only -- a sideways inset would widen the page */
  inset: -20% 0;
  background: radial-gradient(36% 42% at var(--lamp-x, 20%) var(--lamp-y, 50%), var(--lamp-color, rgba(109, 60, 255, 0.28)), transparent 70%);
}

/* Legal pages (Terms / Privacy): the content block is very tall, so a 20% bleed
   below it runs past the end of the footer and adds an empty scrollable gap at
   the bottom of the page. The glow sits at the top, so only bleed upwards. */
.lg.sp-lamp::after{ inset: -20% 0 0 0; }

@media (prefers-reduced-motion: reduce){
  .sp-main::before, .sp-main::after{ animation: none; }
}
.sp-main p,
.sp-main li{
  font-size: clamp(0.98rem, 1.05vw, 1.05rem);
  font-weight: 300;
  line-height: 1.78;
  color: var(--x-body);
}
.sp-main strong{ font-weight: 500; color: #ece9f8; }
.sp-main :is(p, li, td, dd) a:not(.tc-btn):not(.sp-card):not(.ab-person-link):not(.lg-toc-list a){
  color: var(--x-accent-soft);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 255, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.sp-main :is(p, li, td, dd) a:not(.tc-btn):not(.sp-card):not(.ab-person-link):not(.lg-toc-list a):hover{
  color: #fff;
  text-decoration-color: currentColor;
}
.sp-h2{
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--x-title);
  text-wrap: balance;
}
.sp-sub{ max-width: 56ch; }

/* text-style button (inside copy, e.g. "Get a custom quote") */
.sp-link-btn{
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--x-accent-soft);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 255, 0.4);
  text-underline-offset: 3px;
  cursor: pointer;
}
.sp-link-btn:hover{ color: #fff; text-decoration-color: currentColor; }


/* ---------- surfaces ---------- */
.sp-card{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--x-panel);
  border: 1px solid var(--x-edge);
  border-radius: var(--x-radius);
}
a.sp-card{
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--x-ease), translate 0.3s var(--x-ease), background-color 0.3s ease;
}
@media (hover: hover){
  a.sp-card:hover{
    border-color: var(--x-edge-hi);
    translate: 0 -3px;
  }
}

/* closing call-to-action banner (same idea as the home .tc-cta) */
.sp-cta-section{ padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.sp-cta{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.8rem, 4.2vw, 3.4rem);
  border-radius: var(--x-radius);
  border: 1px solid var(--x-edge);
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(109, 60, 255, 0.3), transparent 55%),
    linear-gradient(180deg, #0f0c1a, var(--x-panel-2));
}
/* slow sweep of light across the banner */
.sp-cta::after{
  content: "";
  position: absolute;
  inset: -40% 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(75deg, transparent 35%, rgba(167, 139, 255, 0.16) 50%, transparent 65%);
  animation: sp-sweep 9s ease-in-out infinite;
}
@keyframes sp-sweep{
  0%, 100%{ transform: translateX(-35%); }
  50%     { transform: translateX(35%); }
}
@media (prefers-reduced-motion: reduce){ .sp-cta::after{ animation: none; } }
.sp-cta-copy{
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 58ch;
}
.sp-cta-copy h2{
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #fff;
}
.sp-cta-art{
  justify-self: end;
  width: min(100%, 300px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(54, 21, 139, 0.6), transparent 100%);
}
.sp-cta-art dotlottie-wc{ display: block; width: 100%; height: 100%; }
@media (max-width: 760px){
  .sp-cta{ grid-template-columns: minmax(0, 1fr); }
  .sp-cta-art{ justify-self: center; width: min(70%, 240px); order: -1; }
}

/* thin light seam between sections */
.sp-seam{
  position: relative;
  height: 1px;
  margin: 0 auto;
  max-width: 1200px;
  width: 90%;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 255, 0.45), transparent);
}
.sp-seam::after{
  content: "";
  position: absolute;
  left: 50%; top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  translate: -50% 0;
  background: #cbb8ff;
  box-shadow: 0 0 14px 3px rgba(167, 139, 255, 0.8);
}

/* back to top */
.sp-totop{
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.6rem);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 60;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--x-edge-hi);
  background: rgba(11, 9, 19, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s var(--x-ease), border-color 0.2s ease;
}
.sp-totop.is-on{ opacity: 1; translate: 0 0; pointer-events: auto; }
.sp-totop:hover{ border-color: var(--x-accent-soft); }
.sp-totop:focus-visible{ outline: 2px solid var(--x-accent-soft); outline-offset: 3px; }
.sp-totop svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================================
   LEGAL LAYOUT — Privacy & Terms
   Sticky contents list (left) + reading column (right, ~70 characters).
   Section numbers are real clause numbers, so they're shown as badges.
   Legal text itself never animates.
   ========================================================================= */
.lg-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.3rem 0 0;
}
.lg-meta div{
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--x-edge);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.85rem;
}
.lg-meta dt{ color: var(--x-muted); }
.lg-meta dd{ color: #fff; margin: 0; }
.lg-meta a{ color: #fff; text-decoration: none; }
.lg-meta a:hover{ color: var(--x-accent-soft); }

.lg{
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* hero card: what's in this document */
.lg-hcard-head{
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--x-edge);
}
.lg-hcard-icon{
  width: 46px; height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #d9ccff;
  background: radial-gradient(circle at 30% 25%, rgba(167, 139, 255, 0.45), rgba(54, 21, 139, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 24px rgba(109, 60, 255, 0.4);
}
.lg-hcard-icon svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lg-hcard-title{ font-size: 1rem; font-weight: 500; color: #fff; }
.lg-hcard-sub{ font-size: 0.85rem; color: var(--x-muted); }
.lg-hcard-list{
  list-style: none;
  margin: 0.7rem 0 0.4rem;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.lg-hcard-list a{
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--x-body);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lg-hcard-list a:hover{ background: rgba(139, 92, 255, 0.12); color: #fff; }
.lg-hcard-list span{
  font-size: 0.78rem;
  color: var(--x-accent-soft);
  font-variant-numeric: tabular-nums;
}
.lg-hcard-more{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0.55rem 0;
  font-size: 0.88rem;
  color: var(--x-accent-soft);
  text-decoration: none;
}
.lg-hcard-more:hover{ color: #fff; }
.lg-hcard-more svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* on phones the "On this page" menu does this job */
@media (max-width: 760px){
  .sp-hero-visual.lg-hvisual{ display: none; }
}

/* contents */
.lg-toc{
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  font-family: Poppins, sans-serif;
}
.lg-toc-title{
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.8rem;
}
.lg-toc-toggle{ display: none; }
.lg-toc-progress{
  height: 2px;
  border-radius: 2px;
  background: var(--x-edge);
  overflow: hidden;
  margin-bottom: 0.9rem;
}
.lg-toc-progress span{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--x-accent-deep), var(--x-accent-soft));
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.lg-toc-list{
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 0.3rem;
  margin: 0;
}
.lg-toc-list a{
  position: relative;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--x-muted);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.lg-toc-num{
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.28);
}
.lg-toc-list a:hover{ color: #fff; }
.lg-toc-list a[aria-current="true"]{
  color: #fff;
  background: rgba(139, 92, 255, 0.1);
}
.lg-toc-list a[aria-current="true"] .lg-toc-num{ color: var(--x-accent-soft); }
.lg-toc-list a[aria-current="true"]::before{
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: var(--x-accent);
  box-shadow: 0 0 10px var(--x-accent);
}

/* reading column */
.lg-article{
  max-width: 72ch;
  min-width: 0;
}
/* each section's number badge gets a faint halo, so the column has rhythm */
.lg-sec{ position: relative; }
.lg-sec > h2 .lg-num{ box-shadow: 0 0 22px -4px rgba(139, 92, 255, 0.55); }
.lg-sec{
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  border-top: 1px solid var(--x-edge);
  scroll-margin-top: 1.5rem;
}
.lg-sec:first-child{ border-top: 0; padding-top: 0; }
.lg-sec > h2{
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1rem;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.lg-num{
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  margin-top: -0.05rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 255, 0.4);
  background: rgba(139, 92, 255, 0.1);
  color: var(--x-accent-soft);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.lg-sec h3{
  font-size: 1.02rem;
  font-weight: 500;
  color: #fff;
  margin: 1.6rem 0 0.5rem;
}
.lg-sec p + p{ margin-top: 0.9rem; }
.lg-sec ul,
.lg-sec ol{
  margin: 0.7rem 0 0.9rem;
  padding-left: 1.2rem;
}
.lg-sec li + li{ margin-top: 0.35rem; }
.lg-sec li::marker{ color: var(--x-accent); }
.lg-sec li p{ display: inline; }
.lg-clause{ font-weight: 500; color: #ece9f8; }

/* "In short" summaries */
.lg-sum{
  margin: 1.4rem 0 0.2rem;
  padding: 1rem 1.2rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 255, 0.28);
  background: linear-gradient(135deg, rgba(109, 60, 255, 0.14), rgba(109, 60, 255, 0.03));
}
.lg-sum-label{
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--x-accent-soft) !important;
  margin-bottom: 0.25rem;
}
.lg-sum p:not(.lg-sum-label){ color: #e6e3f3; }

/* contact/company details */
.lg-card{
  margin: 0.4rem 0 0.2rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--x-edge);
  background: rgba(255, 255, 255, 0.025);
}
.lg-card h3{ margin-top: 0; }
.lg-card p + p{ margin-top: 0.2rem; }

/* tables */
.lg-table-wrap{
  margin: 1rem 0;
  overflow-x: auto;
  border: 1px solid var(--x-edge);
  border-radius: 14px;
}
.lg-table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.lg-table th,
.lg-table td{
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--x-edge);
  color: var(--x-body);
  font-weight: 300;
  line-height: 1.6;
}
.lg-table thead th{
  border-top: 0;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  font-weight: 500;
}
.lg-table td:first-child{ color: #fff; font-weight: 400; white-space: nowrap; }
.lg-table td p{ font-size: inherit; margin: 0; }

/* end of the document */
.lg-help{
  margin-top: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(109, 60, 255, 0.24), transparent 55%),
    var(--x-panel);
}
.lg-help h2{
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.lg-related{ margin-top: 1.4rem; font-size: 0.93rem !important; }

/* tablets & phones: contents becomes a sticky "On this page" menu */
@media (max-width: 920px){
  .lg{ grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
  .lg-toc{
    top: 0.6rem;
    z-index: 40;
    max-height: none;
  }
  .lg-toc-title{ display: none; }
  .lg-toc-toggle{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--x-edge-hi);
    border-radius: 14px;
    background: rgba(11, 9, 19, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font: 400 0.9rem Poppins, sans-serif;
    text-align: left;
    cursor: pointer;
  }
  .lg-toc-label{ color: var(--x-muted); flex: 0 0 auto; }
  .lg-toc-current{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lg-toc-toggle svg{
    width: 16px; height: 16px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: rotate 0.25s var(--x-ease);
  }
  .lg-toc.is-open .lg-toc-toggle svg{ rotate: 180deg; }
  .lg-toc-progress{
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    margin: 0;
    height: 2px;
  }
  .lg-toc-list{
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 6px);
    max-height: min(62vh, 480px);
    padding: 0.4rem;
    border: 1px solid var(--x-edge-hi);
    border-radius: 14px;
    background: rgba(11, 9, 19, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
  .lg-toc.is-open .lg-toc-list{ display: block; }
  .lg-sec{ scroll-margin-top: 5.2rem; }
  .lg-article{ max-width: none; }
}
@media (max-width: 560px){
  .lg-table{ min-width: 460px; font-size: 0.88rem; }
  .lg-meta div{ font-size: 0.8rem; }
}

@media print{
  .sp-top, .cover-section7, .lg-toc, .sp-totop, .cookie-banner, #chat-container,
  .get-started-container-rect, .lg-help, .lg-related{ display: none !important; }
  body.sp, .sp-main{ background: #fff !important; }
  .sp-main *{ color: #000 !important; background: none !important; box-shadow: none !important; }
  .lg{ display: block; }
}