/* Website chrome: released 5671d9a design. Public and workspace are explicit
   layout variants; all type, colour, controls and footer rules live here.
   Shared font declarations also support existing reports: keep them stable. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/landing/fonts/Poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/landing/fonts/Poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/landing/fonts/Lora-400.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/landing/fonts/Lora-500-italic.woff2') format('woff2'); }
/* JetBrains Mono ships as TWO STATIC instances (fonttools-instanced from the
   variable file 2026-07-03): Chromium's print-to-PDF embedder silently drops
   variable fonts and substitutes the stack fallback (Menlo) on the exported
   PDF, and the Cahier reports print in this face — keep these static. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/landing/fonts/JetBrainsMono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/landing/fonts/JetBrainsMono-500.woff2') format('woff2'); }
/* CLS guards: metric-tuned local fallbacks for the display faces. */
@font-face { font-family: 'Poppins-fb'; src: local('Arial'); ascent-override: 105%; descent-override: 35%; size-adjust: 112%; }
@font-face { font-family: 'Lora-fb'; src: local('Georgia'); ascent-override: 100%; descent-override: 27%; size-adjust: 104%; }

:root {
  --chrome-sans:  'Poppins', 'Poppins-fb', Arial, sans-serif;
  --chrome-serif: 'Lora', 'Lora-fb', Georgia, serif;
  --chrome-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;
}

.frame { max-width: 1480px; margin: 0 auto; padding: 0 56px; position: relative; z-index: 2; }
.rule  { height: 1px; background: var(--rule); width: 100%; }

.btn { width: 100%; min-width: 0; }
.mobile-signin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 0 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--chrome-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.4s;
}
.mobile-signin span {
  color: var(--ink);
  font-family: var(--chrome-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
}
.mobile-signin:hover, .mobile-signin:hover span { color: var(--accent); }

/* ─────  Btn primitive (used in mobile drawer footer)  ───── */
.btn {
  font-family: var(--chrome-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.5s, border-color 0.5s;
  min-width: 240px;
}
.btn .arr { font-family: var(--chrome-serif); font-style: italic; font-size: 16px; }


/* Scoped tokens insulate the site shell from calculator/report palettes. */
.topbar, .mobile-drawer, .site-footer {
  --chrome-bg: #ffffff; --chrome-deep: #f7f7f8;
  --chrome-ink: #24252c; --chrome-soft: #4b4c54; --chrome-muted: #656670;
  --chrome-accent: #b0512f; --chrome-rule: #24252c0e; --chrome-rule-strong: #24252c1a;
  font: 400 16px/1.5 var(--chrome-sans);
  color: var(--chrome-ink); text-transform: none; letter-spacing: normal;
  box-sizing: border-box; overflow-wrap: anywhere;
}
html[data-theme="night"] :is(.topbar, .mobile-drawer, .site-footer) {
  --chrome-bg: #15161b; --chrome-deep: #1d1e24;
  --chrome-ink: #f7f7f8; --chrome-soft: #d2d2d8; --chrome-muted: #adaeb8;
  --chrome-accent: #e7a389; --chrome-rule: #ffffff0c; --chrome-rule-strong: #ffffff1c;
}
:is(.topbar, .mobile-drawer, .site-footer) *,
:is(.topbar, .mobile-drawer, .site-footer) *::before,
:is(.topbar, .mobile-drawer, .site-footer) *::after { box-sizing: border-box; }
:is(.topbar, .mobile-drawer, .site-footer) a { color: inherit; text-decoration: none; }
:is(.topbar, .mobile-drawer, .site-footer) :focus-visible {
  outline: 2px solid var(--chrome-ink); outline-offset: 4px;
}
.topbar {
  position: sticky; top: 18px; z-index: 60; display: block;
  width: min(800px, calc(100% - 40px)); margin: 20px auto 0; padding: 0;
  border: 1px solid var(--chrome-rule); border-radius: 999px;
  background: var(--chrome-bg); box-shadow: 0 2px 5px #24252c07, 0 8px 28px #24252c03;
}
.topbar-inner {
  position: relative; display: flex; align-items: center; flex-wrap: wrap;
  padding: 8px 14px 8px 22px; min-height: 62px; gap: 12px 28px;
  width: 100%; min-width: 0; margin: auto;
}
/* Intentional workspace difference: full-width rule, room for section nav. */
.topbar[data-site-layout="workspace"] {
  width: calc(100% - 48px); top: 0; margin: 0 auto;
  border: 0; border-bottom: 1px solid var(--chrome-rule-strong);
  border-radius: 0; box-shadow: none;
}
.topbar[data-site-layout="workspace"] .topbar-inner { padding: 8px 0; }
:is(.topbar, .site-footer) .brand {
  display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0;
  font: 600 17px/1.5 var(--chrome-sans); letter-spacing: -.015em;
  color: var(--chrome-ink); text-transform: none; text-decoration: none;
}
:is(.topbar, .site-footer) .brand > span:last-child::after { content: '.'; color: var(--chrome-accent); }
.topbar .nav { display: flex; align-items: center; flex: 1; justify-content: center; gap: 22px; font: 400 12px/1.5 var(--chrome-sans); text-transform: none; letter-spacing: 0; }
.topbar .nav-item { position: relative; padding: 0; }
.topbar .nav-item::before { display: none; }
.topbar .nav-item > a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 0; font: inherit; color: var(--chrome-soft);
}
.topbar .nav-item > a::after {
  content: ''; position: absolute; bottom: 2px; left: 0;
  width: 0; height: 1px; background: var(--chrome-ink); transition: width .2s;
}
.topbar .nav-item > a:hover, .topbar .nav-item > a[aria-current] { color: var(--chrome-ink); }
.topbar .nav-item > a:hover::after, .topbar .nav-item > a[aria-current]::after { width: 100%; }
.topbar .utility { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.topbar .utility .sign-link, .mobile-drawer-foot .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 18px; border: 1px solid var(--chrome-ink); border-radius: 999px;
  background: var(--chrome-ink); color: var(--chrome-bg);
  font: 500 12px/1.5 var(--chrome-sans); letter-spacing: 0; text-transform: none;
  white-space: nowrap; transition: background-color .2s, border-color .2s;
}
.topbar .utility .sign-link:hover, .mobile-drawer-foot .btn:hover { background: var(--chrome-soft); border-color: var(--chrome-soft); }
.topbar .theme-toggle, .topbar .mobile-toggle, .mobile-drawer .mobile-close {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0;
  border: 1px solid var(--chrome-rule-strong); border-radius: 50%;
  background: transparent; color: var(--chrome-ink); cursor: pointer;
  font: inherit; box-shadow: none;
}
.topbar .theme-toggle .theme-thumb {
  position: static; display: grid; place-items: center; width: 19px; height: 19px;
  background: none; border: none; transform: none; box-shadow: none;
}
.topbar .theme-thumb svg { display: block; width: 19px; height: 19px; color: var(--chrome-ink); }
.topbar .mobile-toggle { display: none; }
.mt-bars { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.mt-bars span { display: block; height: 1.5px; width: 100%; background: currentColor; }
.topbar:has(.no-script-links) { border-radius: 28px; }
.no-script-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--chrome-rule); font-size: 13px; }
.no-script-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-drawer { position: fixed; inset: 0; z-index: 1000; pointer-events: none; visibility: hidden; overflow: hidden; }
.mobile-drawer.is-open { pointer-events: auto; visibility: visible; }
.mobile-drawer-scrim { position: absolute; inset: 0; background: #15161bb3; backdrop-filter: blur(8px); }
.mobile-drawer-inner {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
  display: flex; flex-direction: column; background: var(--chrome-bg);
  border-left: 1px solid var(--chrome-rule); overflow-y: auto;
  overscroll-behavior: contain; transform: translateX(100%); transition: transform .25s;
}
.mobile-drawer.is-open .mobile-drawer-inner { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--chrome-rule); flex-shrink: 0; }
.mobile-close::before { content: '×'; font-size: 26px; }
.simple-mobile-nav { display: flex; flex-direction: column; flex: 1; padding: 0 24px; }
.simple-mobile-nav > a { display: block; padding: 17px 0; margin: 0; min-height: 44px; border-bottom: 1px solid var(--chrome-rule); font: 500 18px/1.5 var(--chrome-sans); }
.simple-mobile-nav > .mobile-signin { font-size: 15px; }
.mobile-drawer-foot { padding: 18px 24px; border-top: 1px solid var(--chrome-rule); flex-shrink: 0; }
.mobile-drawer-foot .btn { width: 100%; min-width: 0; white-space: normal; font-size: 14px; }
.site-footer.compact-footer {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 40px 35px;
  border: 0; background: var(--chrome-bg);
}
.compact-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 0; }
.site-footer .brand { font-size: 23px; }
.compact-footer-main nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-size: 12px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer nav a:hover, .compact-footer-base a:hover { text-decoration: underline; text-underline-offset: 4px; }
.compact-footer-base { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 22px; margin-top: 15px; border-top: 1px solid var(--chrome-rule); color: var(--chrome-muted); font-size: 10px; line-height: 1.8; }
.compact-footer-base p { margin: 0; font: inherit; color: inherit; }
.compact-footer-base > div { display: flex; gap: 20px; }
/* ─────  Workspace navigation  ─────
   Build-rendered on workspace /platform/* pages only (body > .ws-rail), so
   every rule below is inert on public, calculator and SLD pages. The rail is
   fixed and the submenu has a constant height, so neither the runtime marking
   nor the MCC gate can move page content. platform.css loads later, hence the
   :root:has() specificity for the suite-width override. */
:root:has(body > .ws-rail) {
  --rail-w: 0px;
  --plat-max-w: min(var(--amp-suite-max, 1920px), calc(96vw - var(--rail-w)));
}
body:has(> .ws-rail) { padding-inline-start: var(--rail-w); }
body:has(> .ws-rail) .topbar .nav { display: none; }
:is(.ws-rail, .ws-sub, .mobile-ws) [hidden] { display: none !important; }
:is(.ws-rail, .ws-sub) :focus-visible { outline-offset: -2px; }
.ws-rail { display: none; }
@media (min-width: 801px) {
  :root:has(body > .ws-rail) { --rail-w: 104px; }
  body:has(> .ws-rail) > .ws-rail {
    position: fixed; z-index: 55; top: 0; bottom: 0; left: 0; width: var(--rail-w);
    display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    padding: 14px 8px; overflow-y: auto; overscroll-behavior: contain;
    background: color-mix(in srgb, var(--chrome-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    border-right: 1px solid var(--chrome-rule-strong);
    box-shadow: 0 2px 5px #24252c07, 0 8px 28px #24252c05;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ws-rail { background: var(--chrome-bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .ws-rail { background: var(--chrome-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.ws-rail-main, .ws-rail-foot { display: flex; flex-direction: column; gap: 4px; }
.ws-rail .ws-primary {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 60px; padding: 9px 4px; border-radius: 14px;
  color: var(--chrome-soft); font: 500 11px/1.2 var(--chrome-sans); letter-spacing: -.005em;
  text-align: center; transition: background-color .2s, color .2s, box-shadow .2s;
}
.ws-rail .ws-primary svg { display: block; width: 22px; height: 22px; flex-shrink: 0; }
.ws-rail .ws-label { white-space: nowrap; overflow-wrap: normal; }
.ws-rail .ws-primary:hover { color: var(--chrome-ink); background: color-mix(in srgb, var(--chrome-ink) 6%, transparent); }
.ws-rail .ws-primary[aria-current] {
  color: var(--chrome-ink); background: color-mix(in srgb, var(--chrome-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chrome-accent) 28%, transparent);
}
.ws-sub {
  display: block; width: calc(100% - 48px); margin: 0 auto;
  border-bottom: 1px solid var(--chrome-rule-strong);
}
/* No visible scrollbar: a long group must not change the row height. */
.ws-sub-inner { display: flex; align-items: stretch; min-height: 44px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ws-sub-inner::-webkit-scrollbar { display: none; }
.ws-sub-group { display: flex; align-items: stretch; gap: 2px; }
.ws-sub a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 14px; white-space: nowrap; color: var(--chrome-soft);
  font: 400 12px/1.5 var(--chrome-sans); letter-spacing: 0; text-transform: none;
  border-bottom: 2px solid transparent;
}
.ws-sub a:hover, .ws-sub a[aria-current="page"] { color: var(--chrome-ink); }
.ws-sub a[aria-current="page"] { border-bottom-color: var(--chrome-ink); }
/* Narrow screens: the drawer lists grouped workspace links in place of the
   public list; its inert/focus/Escape wiring is unchanged. */
.mobile-drawer:has(.mobile-ws) .simple-mobile-nav { display: none; }
.mobile-drawer .mobile-ws { display: flex; flex-direction: column; flex: 1; padding: 0 24px 12px; }
.mobile-ws-group { padding: 14px 0 8px; border-bottom: 1px solid var(--chrome-rule); }
.mobile-ws-head { margin: 0 0 2px; color: var(--chrome-muted); font: 500 11px/1.5 var(--chrome-sans); letter-spacing: .08em; text-transform: uppercase; }
.mobile-ws a { display: flex; align-items: center; min-height: 44px; font: 500 17px/1.4 var(--chrome-sans); }
.mobile-ws a[aria-current="page"] { color: var(--chrome-accent); }
@media (max-width: 800px) {
  .topbar:not([data-site-layout="workspace"]) { max-width: 580px; }
  .topbar-inner { gap: 18px; }
  .topbar .nav { display: none; }
  .topbar .mobile-toggle { display: inline-flex; }
}
@media (max-width: 520px) {
  .topbar { width: calc(100% - 28px); top: 12px; margin-top: 12px; }
  .topbar-inner { min-height: 60px; padding: 7px 10px 7px 18px; gap: 10px; }
  .topbar[data-site-layout="workspace"], .ws-sub { width: calc(100% - 32px); margin-top: 0; top: 0; }
  .topbar .brand { font-size: 16px; }
  .topbar .utility .sign-link { display: none; }
  .site-footer.compact-footer { padding: 5px 20px 30px; }
  .compact-footer-main, .compact-footer-base { align-items: flex-start; flex-direction: column; gap: 12px; }
  .compact-footer-main nav { gap: 10px 22px; }
  .site-footer .brand { font-size: 20px; }
  .compact-footer-base { margin-top: 17px; padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar *, .mobile-drawer *, .site-footer *, .ws-rail *, .ws-sub * { transition: none !important; }
}
/* Website shell only. Printed technical report chrome remains in report CSS. */
@media print {
  .topbar, .mobile-drawer, .site-footer, .ws-rail, .ws-sub { display: none !important; }
  body:has(> .ws-rail) { padding-inline-start: 0 !important; }
}


/* Canonical public shell: landing-page identity, 27 October 2026.
   Keep page-specific palettes out of these components. */
body :is(.topbar,.mobile-drawer,.site-footer.compact-footer) {
 --chrome-bg:#fff; --chrome-deep:#f7f7f9; --chrome-ink:#23232b;
 --chrome-soft:#23232b; --chrome-muted:#65656e; --chrome-accent:#6b58c5;
 --chrome-rule:#e7e6eb; --chrome-rule-strong:#e7e6eb;
 font-family:var(--chrome-sans); line-height:1.6;
}
html[data-theme="night"] body :is(.topbar,.mobile-drawer,.site-footer.compact-footer) {
 --chrome-bg:#17171d; --chrome-deep:#202027; --chrome-ink:#eceaf1;
 --chrome-soft:#eceaf1; --chrome-muted:#aaa7b4; --chrome-accent:#b5a0ee;
 --chrome-rule:#34313f; --chrome-rule-strong:#34313f;
}
body header.topbar, body header.topbar[data-site-layout] {
 width:100%; max-width:none; margin:0; top:0; border:0; border-bottom:1px solid transparent;
 border-radius:0; box-shadow:none; background:color-mix(in srgb,var(--chrome-bg) 92%,transparent); backdrop-filter:blur(20px);
}
body header.topbar .topbar-inner {
 width:min(1400px,calc(100% - 64px)); min-height:84px; padding:0; gap:28px; flex-wrap:nowrap; justify-content:space-between;
}
body :is(.topbar,.site-footer.compact-footer) .brand {
 font:600 23px/1.6 var(--chrome-sans); letter-spacing:-.9px; gap:11px;
}
body :is(.topbar,.site-footer.compact-footer) .brand>span:last-child::after { content:none; }
body :is(.topbar,.site-footer.compact-footer) .brand img { width:31px; height:31px; }
html[data-theme="night"] body :is(.topbar,.site-footer.compact-footer) .brand img { content:url('/assets/landing/identity/mark-dark.svg'); }
body header.topbar .nav { flex:initial; gap:30px; font-size:12px; line-height:1.6; }
body header.topbar .nav-item>a { padding:0; color:var(--chrome-ink); gap:4px; }
body header.topbar .nav-item>a::after { display:none; }
body header.topbar .nav-item>a:hover { color:var(--chrome-accent); }
body header.topbar .nav-new { font-size:8px; background:color-mix(in srgb,var(--chrome-accent) 12%,var(--chrome-bg)); color:var(--chrome-accent); padding:3px 6px; border-radius:4px; margin-left:4px; }
body header.topbar .utility { gap:13px; margin-left:0; }
body header.topbar .utility .sign-link { padding:12px 0; min-height:0; border:0; border-radius:0; color:var(--chrome-ink); background:none; font:400 11px/1.6 var(--chrome-sans); }
body header.topbar .utility .home-entry { display:inline-flex; align-items:center; justify-content:center; background:var(--chrome-ink); color:var(--chrome-bg); border:0; border-radius:32px; padding:12px 19px; min-height:42px; font:500 11px/1.4 var(--chrome-sans); white-space:nowrap; }
body header.topbar :is(.theme-toggle,.mobile-toggle) { width:38px; height:38px; min-width:38px; padding:7px; border:0; background:none; }
body header.topbar :is(.theme-toggle,.mobile-toggle):hover { background:var(--chrome-deep); }
body .site-footer.compact-footer { width:min(1280px,calc(100% - 112px)); max-width:none; margin-inline:auto; padding:50px 0 35px; }
body .site-footer.compact-footer .footer-top { display:flex; align-items:center; gap:35px; border-bottom:1px solid var(--chrome-rule); padding-bottom:35px; }
body .site-footer.compact-footer .footer-top>p { margin:0; font-size:10px; color:var(--chrome-muted); }
body .site-footer.compact-footer .back-top { margin-left:auto; font-size:9px; }
body .site-footer.compact-footer .footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:8px; color:var(--chrome-muted); padding-top:24px; }
body .site-footer.compact-footer .footer-bottom p { margin:0; font:inherit; }
body .site-footer.compact-footer .footer-bottom nav { display:flex; gap:22px; }
@media(max-width:1100px) {
 body header.topbar .nav { gap:16px; font-size:11px; }
 body header.topbar .topbar-inner { gap:18px; }
}
@media(max-width:1000px) {
 body header.topbar .nav { display:none; }
 body header.topbar .mobile-toggle { display:inline-flex; }
}
@media(max-width:650px) {
 body header.topbar .topbar-inner { width:calc(100% - 36px); min-height:70px; gap:12px; }
 body header.topbar .utility { gap:8px; }
 body header.topbar .utility .home-entry { display:none; }
 body header.topbar .brand { font-size:20px; }
 body header.topbar :is(.theme-toggle,.mobile-toggle) { width:44px; height:44px; min-width:44px; }
 body .site-footer.compact-footer { width:calc(100% - 40px); padding:35px 0 45px; }
 body .site-footer.compact-footer .footer-top { flex-wrap:wrap; gap:15px; padding-bottom:24px; }
 body .site-footer.compact-footer .footer-top .brand { font-size:20px; }
 body .site-footer.compact-footer .footer-top>p { order:3; width:100%; font-size:9px; }
 body .site-footer.compact-footer .footer-bottom { flex-wrap:wrap; gap:20px; font-size:10px; }
 body .site-footer.compact-footer .footer-bottom nav { order:3; width:100%; justify-content:space-between; gap:8px; flex-wrap:wrap; }
}
/* Preserve the landing layout while allowing enlarged text to reflow. */
@media(max-width:600px){
 body header.topbar .topbar-inner { flex-wrap:wrap; }
 body header.topbar .brand { min-width:0; max-width:100%; white-space:normal; }
 body header.topbar .brand>span:last-child { min-width:0; overflow-wrap:anywhere; }
 body header.topbar .utility { margin-left:auto; }
}
@media(max-width:600px){
 body .site-footer.compact-footer .brand { min-width:0; max-width:100%; white-space:normal; }
 body .site-footer.compact-footer .brand>span:last-child { min-width:0; overflow-wrap:anywhere; }
}
