/* ═══════════════════════════════════════════════════════════════════════════
   XOVEREIGN Technologies — legal document stylesheet.
   A division of White Crown Enterprises.

   These documents share the site's visual language — PS5 Cosmic, near-black
   voids with a blue bias, one vector mark, no raster asset anywhere — but the
   typography is tuned for sustained reading rather than for a journey through
   a cosmos. Longer measure, higher leading, no motion, no depth.

   Constraints this file is written against, and which must survive any edit:

   1. NOTHING LOADS FROM ANOTHER ORIGIN. No font, no script, no image, no
      stylesheet. The deploy script verifies this and refuses to publish a
      document that breaks it. Type is the platform's own UI stack.

   2. LEGIBILITY IS THE WHOLE JOB. A legal document that cannot comfortably be
      read is a legal document that was not read. Nothing here renders below
      12.8px, body copy sits at 17px with a 1.75 leading and a 68-character
      measure, and every colour pair on the page clears WCAG AA at its size.

   3. STRUCTURE IS REAL, NOT PAINTED ON. Headings are headings in order with no
      level skipped, lists are lists, the table of contents is a nav with an
      ordered list, and the definition tables carry scoped headers. A screen
      reader gets the document, not an impression of it.

   4. IT MUST PRINT. Counsel reads on paper. The print block below is not an
      afterthought — it inverts to black on white, drops the chrome, keeps
      every heading with its body, and prints link targets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS — the same palette as the site, no new colours invented here.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --void:#04060f;
  --deep:#070b1a;
  --ink:#0b1226;
  --raise:#111a33;
  --line:rgba(140,170,255,.16);
  --line-strong:rgba(150,180,255,.32);

  --text:#eaf0ff;
  --muted:#c3cfec;
  --dim:#a2b0d2;

  --accent:#4da3ff;
  --accent-soft:#7aa2ff;
  --ice:#bcd8ff;
  --gold:#ffd60a;

  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* One ramp, clamped, phone through 4K. Floors chosen so the smallest mark
     on the page is 12.8px — see note 2 above. */
  --t-h1:clamp(2rem,4.4vw,3.4rem);
  --t-h2:clamp(1.3rem,2.2vw,1.75rem);
  --t-h3:clamp(1.06rem,1.5vw,1.22rem);
  --t-lede:clamp(1.06rem,1.4vw,1.28rem);
  --t-body:clamp(1.0625rem,1.1vw,1.14rem);
  --t-small:clamp(.9rem,.98vw,1rem);
  --t-label:clamp(.8rem,.88vw,.9rem);

  --shell:min(78ch,92vw);
  --radius:16px;
  --radius-sm:10px;
}

@media (min-width:2560px){
  :root{--shell:min(88ch,80vw);--t-body:1.22rem;--t-small:1.02rem;--t-label:.98rem;--t-lede:1.5rem}
}
@media (min-width:3400px){
  :root{--shell:min(94ch,76vw);--t-body:1.4rem;--t-small:1.16rem;--t-label:1.1rem;--t-lede:1.74rem}
}

/* ───────────────────────────────────────────────────────────────────────────
   2. RESET AND BASE
   ─────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.75;
  /* Declared as a colour, not only as a gradient: a gradient alone leaves the
     canvas transparent, and a transparent canvas is a white flash on load and
     an unreadable page if the gradient is ever dropped. */
  background-color:var(--void);
  background-image:
    radial-gradient(120% 70% at 50% -10%,rgba(45,80,170,.22) 0%,rgba(4,6,15,0) 62%),
    radial-gradient(80% 50% at 92% 8%,rgba(122,162,255,.10) 0%,rgba(4,6,15,0) 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{line-height:1.24;margin:0;font-weight:400;letter-spacing:-.02em;color:#fff;text-wrap:balance}
p,li,dd{text-wrap:pretty}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

a{color:var(--accent-soft);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff}

/* One focus treatment, everywhere, always visible against the void. */
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--ice);
  outline-offset:3px;
  border-radius:6px;
}
:where(section,h2,h3):focus-visible{
  outline:3px solid var(--ice);
  outline-offset:8px;
  border-radius:10px;
}
::selection{background:rgba(77,163,255,.34);color:#fff}

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

/* ───────────────────────────────────────────────────────────────────────────
   3. SKIP LINK — the first tab stop, and it must be visible when it has focus.
   ─────────────────────────────────────────────────────────────────────────── */
.skip{
  position:absolute;top:-200px;left:12px;z-index:1000;
  display:inline-block;padding:.85rem 1.4rem;
  background-color:var(--accent);color:#00122b;font-weight:650;
  border-radius:0 0 12px 12px;text-decoration:none;white-space:nowrap;
}
.skip:focus{top:0;color:#00122b}

/* ───────────────────────────────────────────────────────────────────────────
   4. MASTHEAD
   ─────────────────────────────────────────────────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--line);
  background-color:rgba(4,6,15,.72);
  backdrop-filter:saturate(150%) blur(14px);
  position:sticky;top:0;z-index:50;
}
.masthead__in{
  width:var(--shell);max-width:100%;margin-inline:auto;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);min-height:64px;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text)}
.brand:hover{color:#fff}
.brand__mark{width:34px;height:34px;flex:0 0 auto;color:var(--accent)}
.brand__text{display:flex;flex-direction:column;line-height:1.16}
.brand__name{font-weight:640;letter-spacing:.13em;font-size:var(--t-small);text-transform:uppercase}
.brand__sub{font-size:var(--t-label);letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.masthead__spacer{flex:1 1 auto}
.masthead__back{
  font-size:var(--t-small);color:var(--muted);text-decoration:none;white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;
  display:inline-flex;align-items:center;gap:.5rem;min-height:24px;
}
.masthead__back:hover{border-color:var(--line-strong);color:#fff;background-color:rgba(17,26,51,.7)}
.masthead__back svg{width:15px;height:15px;flex:0 0 auto}

/* ───────────────────────────────────────────────────────────────────────────
   5. DOCUMENT HEAD
   ─────────────────────────────────────────────────────────────────────────── */
.shell{width:var(--shell);max-width:100%;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

.doc-head{padding-block:clamp(2.75rem,7vh,5rem) clamp(1.5rem,4vh,2.5rem)}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);font-weight:650;margin:0 0 1rem;
}
.doc-head h1{font-size:var(--t-h1);font-weight:250;letter-spacing:-.03em}
.doc-lede{
  font-size:var(--t-lede);color:var(--muted);line-height:1.62;
  margin:1.35rem 0 0;max-width:62ch;
}

.doc-meta{
  display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin:1.75rem 0 0;padding:0;list-style:none;
}
.doc-meta li{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;
}

/* The structure banner. Every one of these documents states the same corporate
   structure, because the party you are contracting with is the first thing a
   reviewer checks and the last thing that should be buried in an article. */
.structure{
  margin-top:2rem;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);background-color:rgba(17,26,51,.5);
  padding:1.25rem 1.5rem;
}
.structure__k{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .6rem;
}
.structure p{font-size:var(--t-small);color:var(--muted);margin:0;line-height:1.66}

/* ───────────────────────────────────────────────────────────────────────────
   6. TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────────── */
.toc{
  margin-block:clamp(1.5rem,4vh,2.5rem);
  border:1px solid var(--line);border-radius:var(--radius);
  background-color:rgba(11,18,38,.62);padding:1.5rem clamp(1.1rem,3vw,1.75rem);
}
.toc h2{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);font-weight:500;margin-bottom:1.1rem;
}
.toc ol{
  margin:0;padding:0;list-style:none;counter-reset:toc;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,26ch),1fr));gap:.15rem .5rem;
}
.toc li{counter-increment:toc}
.toc a{
  display:flex;align-items:baseline;gap:.7rem;min-height:24px;
  color:var(--muted);text-decoration:none;font-size:var(--t-small);
  padding:.3rem .55rem;border-radius:var(--radius-sm);
}
.toc a::before{
  content:counter(toc,upper-roman);
  font-family:var(--mono);font-size:var(--t-label);color:var(--accent);
  flex:0 0 auto;min-width:2.6ch;text-align:right;
}
.toc a:hover{background-color:rgba(17,26,51,.9);color:#fff;text-decoration:underline}

/* ───────────────────────────────────────────────────────────────────────────
   7. THE DOCUMENT BODY
   ─────────────────────────────────────────────────────────────────────────── */
.doc{padding-bottom:clamp(3rem,8vh,5.5rem)}
.doc > section{
  padding-block:clamp(1.75rem,4.5vh,2.75rem);
  border-top:1px solid var(--line);
  scroll-margin-top:84px;
}
.doc > section:first-of-type{border-top:0}
.doc h2{
  font-size:var(--t-h2);font-weight:300;margin-bottom:1.2rem;
  display:flex;align-items:baseline;gap:.85rem;
}
.doc h2 .art{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);flex:0 0 auto;font-weight:500;
}
.doc h3{
  font-size:var(--t-h3);font-weight:560;color:#fff;
  margin:2rem 0 .8rem;letter-spacing:-.01em;
}
.doc p,.doc li{color:var(--muted)}
.doc ul,.doc ol{margin:0 0 1.05rem;padding-left:1.5rem;display:grid;gap:.6rem}
.doc li::marker{color:var(--accent)}
.doc strong,.doc b{color:#fff;font-weight:620}
.doc dfn{font-style:normal;color:#fff;font-weight:620}
.doc i{color:inherit}
/* A storage key or identifier quoted inside prose. Set at .94em rather than a
   fixed size so it tracks whatever it is nested in — a monospace face at the
   same nominal size as its surrounding text reads noticeably larger. */
.doc code{
  font-family:var(--mono);font-size:.94em;
  background-color:rgba(17,26,51,.8);border:1px solid var(--line);
  border-radius:6px;padding:.1em .4em;color:var(--ice);
  /* An identifier must not be broken across lines. Inside a table cell the
     column is narrow enough that a permissive wrap shatters a short key into
     one fragment per line, which reads as a rendering fault rather than as a
     value. The cell is inside .table-scroll, so a long identifier widens the
     table and scrolls horizontally instead of fracturing. */
  white-space:nowrap;
}
tbody th code{color:#fff}
/* Give the identifier column room before the wrap rule has to do any work. */
tbody th:has(> code){white-space:nowrap;width:1%}

/* An all-caps block — warranty disclaimers and liability caps, which are
   conspicuous by legal convention. Conspicuous must not mean unreadable:
   the tracking is opened up and the leading raised, because capitals set
   tight are the least legible thing on any page. */
.caps{
  font-variant-caps:normal;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.8;font-size:var(--t-small);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background-color:rgba(11,18,38,.62);padding:1.35rem 1.5rem;margin-bottom:1.05rem;
}
.caps p{color:var(--text)}
.caps p:last-child{margin-bottom:0}

/* A flagged clause — the ones that change a reader's rights. */
.flag{
  border:1px solid rgba(255,214,10,.34);border-left:3px solid var(--gold);
  border-radius:var(--radius);background-color:rgba(255,214,10,.05);
  padding:1.25rem 1.5rem;margin-bottom:1.05rem;
}
.flag__k{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .6rem;
}
.flag p{color:var(--text);margin-bottom:.7rem}
.flag p:last-child{margin-bottom:0}

/* Definition and structure tables.

   A table with three or four columns cannot be shown whole on a phone. The
   choice is to let the columns collapse until each cell is one word per line,
   or to hold the columns at a legible width and scroll the table sideways.
   The second is the only readable option, so the minimum width is set from
   the column count and the container scrolls. It is given a tab stop in the
   markup, because an overflow container with no focusable child cannot be
   scrolled by a keyboard user at all. */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.05rem;
  border-radius:var(--radius-sm);
  /* Named as a container so the caption can be capped at the scroller's own
     width. A viewport-based cap is wrong here: the scroller is narrower than
     the viewport by the page gutter and by the scrollbar, and the difference
     is exactly what clipped the last word of every caption line. */
  container-type:inline-size;
}
.table-scroll:focus-visible{outline:3px solid var(--ice);outline-offset:3px}
/* The floors are set below the 771px the scroll container gets at the widest
   desktop shell, so a desktop reader never sees a scrollbar; a phone reader
   sees one, which is the correct trade. */
table{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:22rem}
table:has(thead th:nth-child(3)){min-width:30rem}
table:has(thead th:nth-child(4)){min-width:42rem}

/* The caption describes the table and belongs to the reading column, not to
   the scrolled strip. Pinning it left and capping its measure at the viewport
   keeps it legible and in place while the columns move underneath it. */
caption{
  text-align:left;color:var(--dim);font-size:var(--t-small);
  padding-bottom:.9rem;line-height:1.6;
  position:sticky;left:0;
  max-width:100cqw;
}
th,td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);font-weight:500;border-bottom-color:var(--line-strong);
}
tbody th{color:#fff;font-weight:560}
td{color:var(--muted)}

/* ───────────────────────────────────────────────────────────────────────────
   8. FOOTER
   ─────────────────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background-color:rgba(4,6,15,.78);padding-block:clamp(2.5rem,6vh,4rem)}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:2rem}
.foot h2{
  font-size:var(--t-small);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.9rem;
}
.foot ul{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.foot a{
  color:var(--muted);text-decoration:none;font-size:var(--t-small);
  display:inline-flex;align-items:center;min-height:24px;
}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__legal{
  margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--dim);display:grid;gap:.5rem;
}
.foot__legal p{margin:0;line-height:1.66}

/* ───────────────────────────────────────────────────────────────────────────
   9. NARROW VIEWPORTS
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .brand__sub{display:none}
  .masthead__in{min-height:60px;gap:.6rem}
  .doc h2{flex-direction:column;gap:.3rem}
  .toc{padding:1.25rem 1.1rem}
}

/* ───────────────────────────────────────────────────────────────────────────
   10. FORCED COLOURS — Windows high contrast. Backgrounds that come only from
   a gradient vanish here, so surfaces are re-declared against system colours.
   ─────────────────────────────────────────────────────────────────────────── */
@media (forced-colors:active){
  .toc,.structure,.caps,.flag,table{border:1px solid CanvasText;background:Canvas}
  .doc > section{border-top:1px solid CanvasText}
  :where(a,button,[tabindex]):focus-visible{outline:3px solid Highlight}
}

/* ───────────────────────────────────────────────────────────────────────────
   11. PRINT — counsel reads on paper.
   ─────────────────────────────────────────────────────────────────────────── */
@media print{
  .masthead,.skip,.toc,.foot{display:none!important}
  body{
    background:#fff!important;color:#000;
    font-size:10.5pt;line-height:1.5;
  }
  .shell{width:auto;max-width:none;padding:0}
  h1,h2,h3,.doc h2 .art,tbody th,.doc strong{color:#000}
  .doc p,.doc li,td,.doc-lede,.structure p,.caps p,.flag p{color:#111}
  .doc > section{border-top:1px solid #999;page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  .caps,.flag,.structure,table{border:1px solid #666;background:transparent!important;page-break-inside:avoid}
  .doc-meta li{border:1px solid #666;color:#000}
  a{color:#000;text-decoration:underline}
  /* Print where a link actually goes — a printed cross-reference to "here" is
     worthless, and these documents cross-reference each other constantly. */
  .doc a[href^="http"]::after,.doc a[href$=".html"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  @page{margin:18mm 16mm}
}