/* xp-public.css — Yarnball CDS theme "XP" (Luna), signed-OUT surfaces.
   Ben, 2026-08-22: the app shell got its XP window in xp.css; everything a visitor
   sees before signing in was still the Unison marketing look — grotesk display type,
   pill buttons, soft cards, a full-bleed video hero. This file is the same theme
   carried onto the public pages: the landing, the sign-in dialog, pricing, the legal
   documents, contact and the 404.

   Companion to xp.css and USELESS WITHOUT IT: every token this file consumes
   (--xp-luna, --xp-luna-flat, --xp-face, --xp-face-hot, --xp-sel, --ui, --mono,
   --r*, the palette) is declared in xp.css's [data-theme="xp"] block. Load xp.css
   first, then this file last of the CDS sheets.

   Same contract as xp.css: a THEME, not app styling. Every selector below carries
   [data-theme="xp"]; Unison and Night are untouched. It restyles DS and public-page
   classes that already exist — no app file gains a style attribute, a utility class,
   or an XP-specific class name.

   Reference: the MMD portal's strategy-xp.css / design-language-gsp-xp.css. Same era,
   same recipes (Luna caption bars, #ECE9D8 face, #919b9c group-box hairline, the
   white->#d6dff7 captioned head, honey #fff7d6 hover), applied to Yarnball's own
   public vocabulary rather than the portal's gsp-* one.

   The visual grammar of these pages, in one sentence: the page ground is the XP
   silver desktop face, content lives in square white group boxes under captioned
   heads, the masthead and the hero are one Luna band, and the sign-in card is a
   real XP dialog with a Luna caption and silver command buttons. */

/* ------------------------------------------------------------------ */
/* 1. the public pages are DOCUMENTS, not the one XP app window        */
/* xp.css locks the shell to the viewport — body{height:100dvh;overflow:hidden},
   #root{height:100%}, .yarnball-app{height:100%;overflow:hidden;border:3px solid}.
   That is correct for the chat window and fatal for a marketing page, which is a
   long scrolling document. Each rule below out-specifies exactly one of those three
   by naming the public marker the page already carries (.legal-page on the static
   pages, .auth-page on the landing, .public-shell on pricing) — no !important. */
[data-theme="xp"] body.legal-page,
[data-theme="xp"] body:has(.auth-page),
[data-theme="xp"] body:has(.public-shell){
  height:auto; min-height:100%; overflow:visible; padding:0;
  background:#ECE9D8; background-attachment:scroll;
  font-family:var(--ui); font-size:11px; color:#000;
}
[data-theme="xp"] #root:has(.auth-page),
[data-theme="xp"] #root:has(.public-shell){height:auto;display:block;min-height:0}
[data-theme="xp"] .yarnball-app:has(.auth-page),
[data-theme="xp"] .yarnball-app:has(.public-shell){
  height:auto; overflow:visible; border:0; border-radius:0; box-shadow:none;
  display:block; background:#ECE9D8;
}
/* pricing renders its page inside the app's own main element */
[data-theme="xp"] .yarnball-main.yarnball-main-compact:has(.public-shell){
  display:block; height:auto; overflow:visible; padding:0; background:#ECE9D8;
}

/* ------------------------------------------------------------------ */
/* 2. the public type scale                                            */
/* app-extensions.css sets ONE scale for every public surface (--t-label ..
   --t-display) and the pages take every size from it, so the whole marketing
   typography moves here rather than in fifty font-size declarations. XP sizes:
   11px working text, 11.5px reading text, headings 13-19px, one hero at 26px.
   Tahoma has no optical tracking, so every letter-spacing goes to zero. */
[data-theme="xp"] .auth-page,
[data-theme="xp"] body.legal-page,
[data-theme="xp"] .yarnball-main.yarnball-main-compact:has(.public-shell){
  --t-label:10px; --t-small:11px; --t-body-s:11px; --t-body:11.5px;
  --t-lead:12.5px; --t-title-s:12px; --t-title:14px;
  --t-display-s:19px; --t-display:26px;
  --lh-display:1.18; --lh-title:1.3; --lh-body:1.5; --lh-dense:1.4;
  --ls-label:0.02em; --ls-title:0; --ls-display:0;
  --page-max:940px; --page-pad:12px; --doc-measure:700px;
}

/* ------------------------------------------------------------------ */
/* 3. masthead — the pinned band becomes Luna chrome with a menu bar   */
[data-theme="xp"] .public-nav-band{
  background:var(--xp-luna-flat); border-bottom:1px solid #0a246a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
[data-theme="xp"] .public-nav-bar{height:30px;gap:14px}
/* text-decoration is restated because xp.css underlines every bare <a> */
[data-theme="xp"] .public-nav-brand{
  font-family:var(--ui); font-size:12px; font-weight:700; color:#fff;
  letter-spacing:0; gap:6px; text-decoration:none;
  text-shadow:1px 1px 1px rgba(0,0,0,.45);
}
[data-theme="xp"] .public-nav-brand img{width:16px;height:16px}
[data-theme="xp"] .public-nav-links{gap:1px}
[data-theme="xp"] .public-nav-link{
  color:#e2ecfb; font-size:11px; font-weight:400; padding:3px 8px;
  text-decoration:none; transition:none;
}
/* XP inverts a menu highlight; on a blue bar that means silver ground, navy text */
[data-theme="xp"] .public-nav-link:hover{background:#ECE9D8;color:#0a246a}
[data-theme="xp"] .public-nav-signin,
[data-theme="xp"] .public-nav-menu-toggle{
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff; padding:2px 11px; min-height:20px;
  line-height:15px; text-decoration:none; transition:none;
}
[data-theme="xp"] .public-nav-signin:hover,
[data-theme="xp"] .public-nav-menu-toggle:hover{
  background:var(--xp-face-hot); color:#000; border-color:#003c74;
}
/* the phone menu drops onto the silver face so the links stay legible */
[data-theme="xp"] .public-nav-links.is-open{background:#ECE9D8;padding:3px}
[data-theme="xp"] .public-nav-links.is-open .public-nav-link{color:#0a246a}

/* ------------------------------------------------------------------ */
/* 4. landing hero — the XP logon band, with the dialog standing on it */
/* The Unison hero is a full-bleed looping video under a paper veil. That is the one
   thing on these pages that cannot be made to read as 2003, so the footage is off
   here and the veil — which is already the exact full-bleed box behind the hero —
   is reused as the logon-screen blue band. Nothing is repositioned, nothing new
   is introduced; one element changes job. */
[data-theme="xp"] .public-hero-video{display:none}
[data-theme="xp"] .public-hero-veil{
  background:linear-gradient(180deg,#5f93d8 0%,#3f74c0 52%,#284f96 100%);
  box-shadow:inset 0 -1px 0 #0a246a;
}
[data-theme="xp"] .public-hero-split{
  gap:26px; padding:22px 0 24px; margin-bottom:18px;
  grid-template-columns:1.1fr 0.9fr; align-items:center;
  background-image:none;
}
[data-theme="xp"] .public-hero-title{
  font-family:var(--ui); font-weight:700; font-size:26px; line-height:1.18;
  letter-spacing:0; color:#fff; margin:0 0 10px;
  text-shadow:1px 1px 2px rgba(0,0,0,.4);
}
[data-theme="xp"] .public-hero-subtitle{
  font-size:12.5px; line-height:1.45; color:#dceafb; margin:0 0 16px; max-width:44ch;
  text-shadow:1px 1px 1px rgba(0,0,0,.3);
}
[data-theme="xp"] .public-hero-actions{gap:12px}
/* the primary call to action is an XP default command button: silver face, bold
   label, and the navy ring XP draws around the button Enter would press */
[data-theme="xp"] .public-nav-cta{
  font-family:var(--ui); font-size:11px; font-weight:700; color:#000;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff, 0 0 0 1px #0a246a;
  padding:4px 16px; min-height:23px; text-decoration:none; transition:none;
}
[data-theme="xp"] .public-nav-cta:hover{
  background:var(--xp-face-hot); color:#000; transform:none;
}
/* "Explore Capabilities" is a nav link reused inside the hero — on blue it is white */
[data-theme="xp"] .public-hero-actions .public-nav-link{
  color:#fff; text-decoration:underline; padding:3px 0; background:none;
}
[data-theme="xp"] .public-hero-actions .public-nav-link:hover{
  background:none; color:#fff7d6;
}
[data-theme="xp"] .public-hero-auth{align-items:flex-start;justify-content:center}
[data-theme="xp"] .public-hero-auth .settings-narrow{max-width:330px}

/* ------------------------------------------------------------------ */
/* 5. the sign-in / create-account card as a real XP dialog            */
/* DOM (DS AuthCard): form.authc > img.mark + span.word + p.asub + [tabs, fields,
   buttons]. The mark is lifted out of the flow into the caption bar so .word — the
   product name — becomes the Luna title strip, which is what an XP dialog leads
   with. The card's own side padding stays and the caption bleeds back out of it. */
[data-theme="xp"] .auth-page .authc{
  background:#ECE9D8; color:#000;
  border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  padding:0 10px 11px; max-width:330px; overflow:hidden;
}
/* Unison draws a 4px accent rule across the top of the card; the caption bar
   replaces it (beats .authc::before in _ds_bundle.css) */
[data-theme="xp"] .authc::before{content:none}
/* The ONLY !important in this file, and the rule it beats is nameable: the DS
   YarnballMark component writes the mark's size as an inline style attribute —
   `style={{width:size,height:size}}` with size=42 passed by auth.js — which no
   stylesheet selector can outrank. A 42px logo does not fit a 21px caption bar,
   so the two dimensions are forced and nothing else is. */
[data-theme="xp"] .authc .mark{
  position:absolute; top:4px; left:5px; z-index:1;
  width:16px !important; height:16px !important; margin:0; border-radius:2px;
}
[data-theme="xp"] .authc .word{
  display:block; margin:0 -10px; padding:4px 8px 5px 27px;
  background:var(--xp-luna); color:#fff;
  font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:0;
  text-align:left; text-shadow:1px 1px 1px rgba(0,0,0,.45);
}
/* the dialog's instruction line */
[data-theme="xp"] .authc .asub{
  text-align:left; color:#000; font-size:11px; line-height:1.4; margin:8px 0 9px;
}

/* property-sheet tabs. xp.css styles .atab and its [aria-selected]/.active states;
   the DS Tabs component marks the current tab .on, which nothing had covered. */
[data-theme="xp"] .authc .atabs{
  background:transparent; border-bottom:1px solid #919b9c;
  gap:1px; padding:0; margin:0 0 10px;
}
[data-theme="xp"] .authc .atab{
  flex:0 0 auto; text-align:center; padding:2px 12px; font-size:11px; font-weight:400;
}
/* An XP property-sheet tab is the LIGHTEST one — it merges into the panel below it.
   The four forced declarations here beat exactly one rule, the bare `.atab.on`
   selector in app-extensions.css (the `.srow .atab.on, .atab.on, .atab.is-active …`
   block), which sets background / color / font-weight / box-shadow with !important
   and would otherwise paint the current tab solid accent — a dark selected tab
   beside a light unselected one, which inverts the era's idiom. Nothing else is
   forced: border, margin and padding land normally. */
[data-theme="xp"] .authc .atab.on{
  background:#fff !important; color:#0a246a !important; font-weight:700 !important;
  box-shadow:none !important;
  border:1px solid #919b9c; border-bottom:1px solid #fff;
  margin-bottom:-1px;
}

/* fields. xp.css sweeps .fld into the sunken-control group with input/textarea/
   select — but .fld here is the WRAPPER around label+input, so it drew a second
   white box around every field. Undone for the two public forms that use it. */
[data-theme="xp"] .authc .fld,
[data-theme="xp"] .contact-form .fld{
  background:transparent; border:0; padding:0; box-shadow:none;
}
[data-theme="xp"] .authc .fld{margin-bottom:8px}
[data-theme="xp"] .authc .fld label{
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  letter-spacing:0; text-transform:none; margin:0 0 2px 1px;
}
[data-theme="xp"] .authc .fld input{
  width:100%; font-family:var(--ui); font-size:11px; color:#000;
  background:#fff; border:1px solid #7F9DB9; border-radius:0;
  padding:3px 5px; box-shadow:inset 1px 1px 0 rgba(0,0,0,.10);
}
[data-theme="xp"] .authc .fld input:focus{
  border-color:#0a5bc4; box-shadow:inset 1px 1px 0 rgba(0,0,0,.10);
  outline:1px dotted #0a246a; outline-offset:1px;
}
[data-theme="xp"] .authc .auth-field-action{margin:-4px 0 9px}
[data-theme="xp"] .authc .tlink{
  font-family:var(--ui); font-size:11px; color:#0a246a;
  text-decoration:underline; text-decoration-color:currentColor;
}
[data-theme="xp"] .authc .hint{
  font-family:var(--ui); font-size:11px; letter-spacing:0; text-transform:none;
  color:#4a4a4a; text-align:left; margin-top:6px;
}
[data-theme="xp"] .authc .action-row{gap:5px;margin-top:6px}
[data-theme="xp"] .authc .mini{
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff; padding:2px 9px; min-height:20px;
}
[data-theme="xp"] .authc .mini:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .authc .auth-consent-row{
  font-size:11px; line-height:1.4; gap:6px; margin:10px 0 9px;
}
[data-theme="xp"] .authc .auth-consent-row a,
[data-theme="xp"] .authc .link-accent{color:#0a246a;text-decoration:underline}

/* command buttons. The submit is the dialog's default button (bold + navy ring);
   the identity buttons below it are ordinary silver commands of the same height,
   so the stack reads as one command block rather than four unrelated widgets. */
[data-theme="xp"] .authc .submit{
  width:100%; font-family:var(--ui); font-size:11px; font-weight:700; color:#000;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff, 0 0 0 1px #0a246a;
  padding:4px 12px; min-height:23px; margin-top:2px;
}
[data-theme="xp"] .authc .submit:hover{background:var(--xp-face-hot);color:#000}
[data-theme="xp"] .authc .submit:disabled{
  background:#e6e2d6; color:#9a958a; border-color:#b5b0a2; box-shadow:none;
}
[data-theme="xp"] .authc .btn{width:100%;margin-top:6px;min-height:23px}
/* "or continue with" — an XP etched group separator, not an uppercase eyebrow */
[data-theme="xp"] .authc .or{
  font-family:var(--ui); font-size:11px; letter-spacing:0; text-transform:none;
  color:#4a4a4a; gap:7px; margin:12px 0 8px;
}
[data-theme="xp"] .authc .or::before,
[data-theme="xp"] .authc .or::after{
  height:2px; background:linear-gradient(180deg,#ACA899 0 1px,#FFFFFF 1px 2px);
}
[data-theme="xp"] .sso-btn,
[data-theme="xp"] .sso-btn.quiet{
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:5px; padding:4px 12px; min-height:23px;
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff; transition:none;
}
[data-theme="xp"] .sso-btn:hover,
[data-theme="xp"] .sso-btn.quiet:hover{
  background:var(--xp-face-hot); color:#000; border-color:#003c74;
}
[data-theme="xp"] .sso-btn svg{flex:0 0 auto}
[data-theme="xp"] .authc .aerr{
  font-family:var(--ui); font-size:11px; color:#a00; text-align:left;
  margin-top:8px; line-height:1.4;
}

/* ------------------------------------------------------------------ */
/* 6. landing sections — XP group boxes with a captioned head          */
/* Each section is already three consecutive elements: an h2 title, a p sub, then
   the grid. Given the borders below they stop being three loose blocks and become
   one box: captioned head, note, contents. Same three classes on both sections. */
[data-theme="xp"] .public-section-title{
  background:linear-gradient(180deg,#fefefe 0%,#d6dff7 100%);
  border:1px solid #919b9c; border-bottom:0;
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a;
  letter-spacing:0; text-align:left; margin:0; padding:3px 8px;
}
[data-theme="xp"] .public-section-sub{
  background:#ECE9D8; border-left:1px solid #919b9c; border-right:1px solid #919b9c;
  border-top:1px solid #919b9c;
  font-size:11px; color:#333; text-align:left; margin:0; padding:6px 8px 2px;
}
[data-theme="xp"] .public-features-grid,
[data-theme="xp"] .public-downloads-grid{
  background:#ECE9D8; border:1px solid #919b9c; border-top:0;
  gap:6px; margin:0 0 18px; padding:6px;
}
[data-theme="xp"] .public-feature-card,
[data-theme="xp"] .public-download-card{
  background:#fff; border:1px solid #919b9c; border-radius:0;
  padding:7px 9px; gap:5px; transition:none; text-decoration:none;
}
[data-theme="xp"] .public-feature-card:hover,
[data-theme="xp"] .public-download-card:hover{
  background:#fff7d6; border-color:#919b9c; transform:none;
}
[data-theme="xp"] .public-feature-icon{color:#0a246a;margin-bottom:6px}
[data-theme="xp"] .public-feature-title,
[data-theme="xp"] .public-download-title{
  font-family:var(--ui); font-size:11.5px; font-weight:700; color:#0a246a;
  margin:0 0 3px; line-height:1.3;
}
[data-theme="xp"] .public-feature-desc,
[data-theme="xp"] .public-download-note{
  font-size:11px; color:#333; line-height:1.4; margin:0;
}
[data-theme="xp"] .public-download-meta{
  font-family:var(--mono); font-size:10px; color:#4a4a4a; letter-spacing:0; margin:0;
}
[data-theme="xp"] .public-download-caveat{
  font-size:10px; color:#6a655a; line-height:1.4; margin:3px 0 0;
}
/* the download affordance is a command, so it reads as a small silver button */
[data-theme="xp"] .public-download-action{
  align-self:flex-start; margin-top:auto;
  font-family:var(--ui); font-size:10px; font-weight:700; color:#0a246a;
  background:var(--xp-face); border:1px solid #003c74; border-radius:3px;
  box-shadow:inset 1px 1px 0 #fff; padding:1px 9px;
}
[data-theme="xp"] .public-download-card:hover .public-download-action{
  background:var(--xp-face-hot);
}

/* the security block is one group box with its heading as the caption */
[data-theme="xp"] .public-security-banner{
  background:#fff; border:1px solid #919b9c; border-radius:0;
  padding:0; margin:0 0 18px;
}
[data-theme="xp"] .public-security-title{
  background:linear-gradient(180deg,#fefefe 0%,#d6dff7 100%);
  border-bottom:1px solid #919b9c;
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a;
  margin:0; padding:3px 8px; gap:6px;
}
[data-theme="xp"] .public-security-title svg{color:#0a246a}
/* the box runs the full page width; the sentences inside it must not — 11.5px
   across 900px is a 145-character measure and nobody finds the next line */
[data-theme="xp"] .public-security-desc{
  font-size:11.5px; line-height:1.5; color:#000; margin:0;
  padding:7px 10px 0; max-width:92ch;
}
[data-theme="xp"] .public-security-more{
  display:inline-block; margin:8px 10px 10px;
  font-size:11px; color:#0a246a; text-decoration:underline;
}

/* ------------------------------------------------------------------ */
/* 7. footer — the window status bar, on every public page             */
[data-theme="xp"] .public-footer{
  flex-direction:row; flex-wrap:wrap; align-items:center;
  justify-content:space-between; text-align:left; gap:10px;
  background:#ECE9D8; border-top:1px solid #ACA899; padding:5px 0;
}
[data-theme="xp"] .public-footer-links{gap:12px;justify-content:flex-start}
[data-theme="xp"] .public-footer-link{
  font-size:10px; color:#0a246a; text-decoration:underline; transition:none;
}
[data-theme="xp"] .public-footer-link:hover{color:#0a5bc4}
[data-theme="xp"] .public-footer-copy{font-size:10px;color:#4a4a4a}

/* ------------------------------------------------------------------ */
/* 8. the document pages — privacy, terms, security, pricing, contact  */
/* The shared frame becomes a white document window standing on the silver face. */
[data-theme="xp"] .public-shell{
  background:#fff; border:1px solid #919b9c;
  margin:8px auto 14px; padding:0 14px;
}
/* the status strip runs the full width of the document window. width:auto is the
   load-bearing half: .public-footer carries width:100%, which pins it to the shell's
   CONTENT width, so the negative margins slid it left instead of widening it and it
   finished 28px short of the right border. */
[data-theme="xp"] .public-shell > .public-footer{margin:0 -14px;width:auto}

[data-theme="xp"] .legal-head{
  max-width:none; margin:0; padding:10px 0 8px; border-bottom:1px solid #ACA899;
}
[data-theme="xp"] .legal-head h1{
  font-family:var(--ui); font-size:19px; font-weight:700; color:#0a246a;
  letter-spacing:0; line-height:1.2; margin:0 0 3px;
}
[data-theme="xp"] .legal-updated{
  font-family:var(--ui); font-size:11px; color:#4a4a4a;
  letter-spacing:0; text-transform:none; margin:0;
}
/* the lede takes the document measure, not a ch-count of its own — the head sits
   above the text column and a shorter first paragraph reads as a broken edge */
[data-theme="xp"] .legal-lede,
[data-theme="xp"] .legal-lede-tight{
  font-size:11.5px; line-height:1.5; color:#000;
  max-width:var(--doc-measure); margin:8px 0 0;
}
[data-theme="xp"] .legal-lede p{margin:0 0 7px}
[data-theme="xp"] .legal-lede a,
[data-theme="xp"] .legal-doc a{color:#0a246a;text-decoration:underline}

[data-theme="xp"] .legal-layout{
  grid-template-columns:minmax(0,1fr) 210px; gap:22px; padding:12px 0 18px;
}
/* the index is an Explorer task pane: captioned silver box, pinned under the band */
[data-theme="xp"] .legal-index{
  top:38px; background:#ECE9D8; border:1px solid #919b9c; padding:0;
}
[data-theme="xp"] .legal-index-title{
  background:linear-gradient(180deg,#fefefe 0%,#d6dff7 100%);
  border-bottom:1px solid #919b9c;
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a;
  letter-spacing:0; text-transform:none; margin:0; padding:3px 7px;
}
[data-theme="xp"] .legal-index ol{padding:5px 8px 7px;gap:4px}
[data-theme="xp"] .legal-index a{
  font-size:11px; line-height:1.35; color:#0a246a; text-decoration:underline;
}
[data-theme="xp"] .legal-index a:hover{color:#0a5bc4}
[data-theme="xp"] .legal-index a.is-active{
  color:#000; font-weight:700; text-decoration:none;
}
[data-theme="xp"] .legal-index a.is-active::before{background:#0a5bc4;left:-6px}

[data-theme="xp"] .legal-doc{max-width:none;font-size:11.5px}
[data-theme="xp"] .legal-section{scroll-margin-top:40px;padding:0}
[data-theme="xp"] .legal-section + .legal-section{
  margin-top:14px; padding-top:12px; border-top:1px solid #D8D4C8;
}
[data-theme="xp"] .legal-section h2{
  font-family:var(--ui); font-size:13px; font-weight:700; color:#0a246a;
  letter-spacing:0; margin:0 0 6px;
}
[data-theme="xp"] .legal-section-no{
  font-family:var(--mono); font-size:10px; color:#0a5bc4;
  letter-spacing:0; margin-bottom:3px;
}
[data-theme="xp"] .legal-doc h3{
  font-family:var(--ui); font-size:12px; font-weight:700; color:#000; margin:11px 0 4px;
}
[data-theme="xp"] .legal-doc p{font-size:11.5px;line-height:1.5;color:#000;margin:0 0 8px}
[data-theme="xp"] .legal-doc ul,
[data-theme="xp"] .legal-doc ol{margin:0 0 9px;padding-left:18px;color:#000}
[data-theme="xp"] .legal-doc li{margin-bottom:3px;line-height:1.5}
[data-theme="xp"] .legal-doc strong{font-weight:700;color:#000}
/* xp.css already gives th/td the SAP-B1 grid borders; only the metrics change */
[data-theme="xp"] .legal-doc th,
[data-theme="xp"] .legal-doc td{padding:2px 6px;font-size:11px;color:#000;vertical-align:top}
/* The security page's route diagram needs almost nothing: it is drawn with DS classes
   against the tokens, so xp.css's palette already reaches inside the SVG (paper boxes,
   #ACA899 hairlines, navy accents). Two things do not come from tokens — the rx="9"
   corner radius sits on the <rect> as a presentation attribute, which the CSS geometry
   property overrides, and the figure was centred while every line of text beside it is
   flush left. */
[data-theme="xp"] .sec-node{rx:0}
[data-theme="xp"] .sec-figure{margin-left:0;margin-top:12px;margin-bottom:20px}
[data-theme="xp"] .sec-figure figcaption{
  font-size:10.5px; line-height:1.4; color:#4a4a4a; margin:8px 0 0; text-align:left;
}

/* ------------------------------------------------------------------ */
/* 9. pricing — one plan per group box, price in the box, command below */
[data-theme="xp"] .pricing-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:6px; margin-top:10px;
}
[data-theme="xp"] .pricing-card{
  background:#fff; border:1px solid #919b9c; border-radius:0; padding:0; gap:0;
}
/* the emphasis is a doubled edge drawn INSIDE the 1px border, not a 2px one — a
   thicker border changes the box height and drops this card's caption a pixel
   below the captions either side of it */
[data-theme="xp"] .pricing-card--featured{
  border:1px solid #0a5bc4; box-shadow:inset 0 0 0 1px #0a5bc4;
}
[data-theme="xp"] .pricing-card-head{
  background:linear-gradient(180deg,#fefefe 0%,#d6dff7 100%);
  border-bottom:1px solid #919b9c; padding:3px 8px; gap:8px;
}
[data-theme="xp"] .pricing-card h3{
  font-family:var(--ui); font-size:11px; font-weight:700; color:#0a246a; letter-spacing:0;
}
[data-theme="xp"] .pricing-mark{
  font-family:var(--ui); font-size:10px; color:#4a4a4a;
  letter-spacing:0; text-transform:none;
}
[data-theme="xp"] .greet.plan-price{
  font-family:var(--ui); font-size:17px; font-weight:700; color:#000;
  letter-spacing:0; line-height:1.1; margin:7px 10px 3px;
}
[data-theme="xp"] .pricing-card p{font-size:11px;color:#333;line-height:1.4;margin:0 10px 5px}
[data-theme="xp"] .pricing-card ul{
  justify-content:flex-start; gap:2px; font-size:11px; color:#000;
  margin:4px 10px 9px; padding-left:15px;
}
[data-theme="xp"] .pricing-card .plan-cta{width:auto;margin:auto 10px 10px;min-height:23px}
[data-theme="xp"] .pricing-card .plan-cta:hover{box-shadow:inset 1px 1px 0 rgba(255,255,255,.5)}
[data-theme="xp"] .pricing-retry-btn{margin-top:6px}
[data-theme="xp"] .pricing-notes{
  max-width:none; margin:14px 0 0;
  background:#fff; border:1px solid #919b9c; padding:8px 10px;
}
[data-theme="xp"] .pricing-notes h2{
  font-family:var(--ui); font-size:13px; font-weight:700; color:#0a246a;
  letter-spacing:0; margin:0 0 6px;
}
/* the panel spans the page; its sentences hold the reading measure */
[data-theme="xp"] .pricing-notes p{
  font-size:11.5px; line-height:1.5; color:#000; margin:0 0 8px;
  max-width:var(--doc-measure);
}
[data-theme="xp"] .pricing-notes a,
[data-theme="xp"] .pricing-footnote a{color:#0a246a;text-decoration:underline}
[data-theme="xp"] .sub.pricing-footnote{
  max-width:var(--doc-measure); margin:10px 0 0;
  font-size:10.5px; line-height:1.45; color:#4a4a4a;
}

/* ------------------------------------------------------------------ */
/* 10. contact — an XP form panel, sunken fields, one command row      */
/* flush left with the heading above it — the Unison layout centres this panel in a
   page whose every other line starts at the same left edge */
[data-theme="xp"] .contact-form,
[data-theme="xp"] .contact-done{
  max-width:620px; margin:12px 0 14px;
  background:#fff; border:1px solid #919b9c; padding:9px 10px 10px;
}
[data-theme="xp"] .contact-form{gap:8px}
[data-theme="xp"] .contact-row{gap:8px}
[data-theme="xp"] .contact-form .fld{gap:2px;margin:0}
[data-theme="xp"] .contact-form .fld > span{
  font-family:var(--ui); font-size:11px; font-weight:400; color:#000;
  letter-spacing:0; text-transform:none;
}
[data-theme="xp"] .contact-actions{gap:8px;padding-top:2px}
[data-theme="xp"] .contact-privacy{font-size:10px;color:#4a4a4a}
[data-theme="xp"] .contact-note{font-size:11px;color:#4a4a4a;margin:0}
[data-theme="xp"] .contact-note.is-bad{color:#a00;font-weight:700}
[data-theme="xp"] .contact-done h2{
  font-family:var(--ui); font-size:13px; font-weight:700; color:#0a246a;
  letter-spacing:0; margin:0 0 5px;
}
[data-theme="xp"] .contact-done p{font-size:11.5px;line-height:1.5;color:#000;margin:0 0 7px}
[data-theme="xp"] .contact-done a{color:#0a246a;text-decoration:underline}

/* ------------------------------------------------------------------ */
/* 11. 404 — the one page that IS an error, so it is an error dialog   */
/* not-found.html carries no page-specific class of its own; what makes it unique
   in the whole public set is its shape — a head with the footer straight after it
   and no document body between. Every other page (legal, contact, pricing) puts a
   layout, a form or a grid in that gap, so this matches nothing else. If the page
   ever gains a body block it simply falls back to the document look above. */
/* An #ECE9D8 dialog on an #ECE9D8 page is not a dialog, it is a rectangle. This is
   the one public page that should stand on the desktop, so the Bliss ground xp.css
   paints on <body> comes back here — restated because the escape in section 1 had to
   flatten it for the long scrolling documents. Same recipe as xp.css's body rule. */
[data-theme="xp"] body:has(.public-shell > .legal-head + .public-footer){
  background:
    radial-gradient(120% 58% at 50% 116%, #6f9b3f 0%, #58832f 36%, rgba(88,131,47,0) 68%),
    linear-gradient(180deg,#1c5fb5 0%,#3f86d8 40%,#7db3e8 64%,#b7d8f2 77%,#8fb96a 78%,#6f9b3f 100%);
  background-repeat:no-repeat; background-size:cover; min-height:100dvh;
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer){
  max-width:440px; margin:56px auto; padding:0;
  background:#ECE9D8; border:3px solid #0053ee; border-radius:7px 7px 4px 4px;
  box-shadow:0 10px 30px rgba(0,0,0,.45); overflow:hidden;
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer) > .legal-head{
  padding:0; border-bottom:0;
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer) > .legal-head h1{
  background:var(--xp-luna); color:#fff;
  font-size:12px; font-weight:700; line-height:1.35; margin:0; padding:4px 8px;
  text-shadow:1px 1px 1px rgba(0,0,0,.45);
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer) .legal-updated{
  color:#a00; font-weight:700; padding:9px 12px 0;
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer) .legal-lede{
  margin:0; padding:4px 12px 11px; max-width:none;
}
[data-theme="xp"] .public-shell:has(> .legal-head + .public-footer) > .public-footer{
  margin:0; padding:5px 12px;
}

/* ------------------------------------------------------------------ */
/* 12. shared trim                                                     */
[data-theme="xp"] .auth-page{background:#ECE9D8;padding:0 0 14px}
[data-theme="xp"] .public-landing-container{padding:0 var(--page-pad)}
[data-theme="xp"] ::selection{background:var(--xp-sel);color:#fff}
/* the Unison layer's soft chrome has no place on these pages either */
[data-theme="xp"] .authc,
[data-theme="xp"] .public-feature-card,
[data-theme="xp"] .public-download-card,
[data-theme="xp"] .pricing-card,
[data-theme="xp"] .public-security-banner{backdrop-filter:none}