/**
 * Mindfront Design System
 * Core variables and base styles
 */
/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root {
  /* --------------------------------------------------------------------------
     COLORS - Core Palette
     -------------------------------------------------------------------------- */
  /* Background */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-dark: #0f172a;
  /* Navy - for dark sections */
  --color-bg-dark-hover: #1e293b;
  /* Slate 800 */
  /* Pure monochrome. NOT the same as --color-text (#1a202c) or --color-bg.
     The landing page is deliberately absolute black on absolute white: the
     section contract, the display type and the buttons all use these. Reaching
     for --color-text there would wash the type out by a few percent, which is
     exactly the softening the design is refusing. Named so the intent survives
     the next person who sees a raw #000 and "fixes" it. */
  --color-ink: #000;
  --color-paper: #fff;
  /* Text */
  --color-text: #1a202c;
  /* Primary text */
  --color-text-secondary: #4a5568;
  --color-text-tertiary: #69778d;
  /* 4.54:1 on white. AA needs 4.5 */
  --color-text-muted: #637896;
  /* 4.51:1 on white; was Slate 400 at 2.56 */
  --color-text-inverse: #ffffff;
  /* Text on dark backgrounds */
  /* Accent */
  --color-accent: #2868b4;
  --color-accent-light: #81cdfa;
  --color-accent-vibrant: #4F9CF9;
  /* Borders */
  --color-border: #e2e8f0;
  --color-border-dark: #334155;
  /* For dark sections */
  /* Status */
  --color-success: #0d9488;
  --color-success-bg: #f0fdfa;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-error: #e53e3e;
  --color-error-bg: #fee2e2;
  /* Shadows */
  --color-shadow: rgba(0, 0, 0, 0.1);
  /* --------------------------------------------------------------------------
     TYPOGRAPHY - Font Family
     -------------------------------------------------------------------------- */
  --font-sans: 'Simplon Norm', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
  /* --------------------------------------------------------------------------
     TYPOGRAPHY - Font Sizes
     -------------------------------------------------------------------------- */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-md: 1.125rem;
  /* 18px */
  --text-lg: 1.25rem;
  /* 20px */
  --text-xl: 1.5rem;
  /* 24px */
  --text-2xl: 1.875rem;
  /* 30px */
  --text-3xl: 2.25rem;
  /* 36px */
  --text-4xl: 3rem;
  /* 48px */
  --text-5xl: 3.75rem;
  /* 60px */
  --text-6xl: 4.5rem;
  /* 72px */
  /* Prose (for reading - slightly larger) */
  --prose-base: 1.1875rem;
  /* 19px */
  --prose-lg: 1.375rem;
  /* 22px - lead paragraphs */
  /* --------------------------------------------------------------------------
     TYPOGRAPHY - Font Weights
     -------------------------------------------------------------------------- */
  --weight-thin: 100;
  --weight-light: 200;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  /* --------------------------------------------------------------------------
     TYPOGRAPHY - Line Heights
     -------------------------------------------------------------------------- */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 1.8;
  /* --------------------------------------------------------------------------
     TYPOGRAPHY - Letter Spacing
     -------------------------------------------------------------------------- */
  --tracking-tighter: -0.04em;
  /* Tight headlines */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.08em;
  /* Uppercase labels */
  --tracking-mega: 0.1em;
  /* Section headers */
  /* --------------------------------------------------------------------------
     SPACING
     -------------------------------------------------------------------------- */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  /* 48px */
  --space-3xl: 4rem;
  /* 64px */
  --space-4xl: 6rem;
  /* 96px */
  --space-5xl: 8rem;
  /* 128px */
  /* --------------------------------------------------------------------------
     CHROME

     The two bars that bracket every page: the sticky one at the top and the
     status bar at the foot. header.css and footer.css are held to these, so a
     section that has to sit whole between them can subtract both and land on
     the frame. Change the number here, not in either bar.
     -------------------------------------------------------------------------- */
  --chrome-top: 60px;
  --chrome-bottom: 84px;
  --chrome-bottom-mobile: calc(58px + env(safe-area-inset-bottom));
  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --max-width-prose: 42rem;
  /* ~70 chars - optimal reading */
  --max-width-content: 52rem;
  /* Content with some breathing room */
  --max-width-wide: 70rem;
  /* Wide content */
  --max-width-full: 87.5rem;
  /* Full width container */
  /* --------------------------------------------------------------------------
     BORDERS & RADII
     -------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-full: 9999px;
  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  /* --------------------------------------------------------------------------
     TRANSITIONS
     -------------------------------------------------------------------------- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  /* --------------------------------------------------------------------------
     LEGACY ALIASES (for backward compatibility - migrate away from these)
     -------------------------------------------------------------------------- */
  --color-background: var(--color-bg);
  --color-background-alt: var(--color-bg-alt);
  --color-text-primary: var(--color-text);
  --color-text-on-accent: var(--color-text-inverse);
  --color-border-primary: var(--color-border);
  --color-border-secondary: var(--color-border);
  --color-accent-green: #007E9A;
  --color-accent-green-bright: #28a745;
  --color-perimeter-blue: var(--color-accent-vibrant);
  --color-status-success: var(--color-success);
  --color-status-warning: var(--color-warning);
  --color-status-error: var(--color-error);
  --color-status-success-bg: #f0fdfa;
  --color-status-warning-bg: #fef3c7;
  --color-status-error-bg: #fee2e2;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --font-family: var(--font-sans);
  --line-height: var(--leading-normal);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-xl);
  --spacing-xl: var(--space-2xl);
  --spacing-xxl: var(--space-3xl);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-md: var(--text-md);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-xxl: var(--text-3xl);
  --font-weight-thin: var(--weight-thin);
  --font-weight-light: var(--weight-light);
  --font-weight-normal: var(--weight-normal);
  --font-weight-medium: var(--weight-medium);
  --font-weight-semibold: var(--weight-semibold);
  --font-weight-bold: var(--weight-bold);
  --font-weight-extrabold: var(--weight-extrabold);
  --font-weight-black: var(--weight-black);
  --border-radius: var(--radius-sm);
  --border-radius-xl: var(--radius-xl);
  --border-radius-full: var(--radius-full);
  /* Flow Components - Typeform-style UI */
  --flow-title-size: var(--text-xl);
  --flow-description-size: var(--text-base);
  --flow-icon-size: 3rem; }

/* ============================================================================
   GLOBAL RESET
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-bg); }

body {
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

img,
video {
  max-width: 100%;
  height: auto; }

figure {
  display: flex;
  justify-content: center; }

/* Element-level, so it belongs with the other base styles rather than in a
   page sheet. It lived in landing_page.css, which meant a rule affecting every
   <header> on the site rode along with a stylesheet only eight pages need.
   Moving that sheet out of the global bundle silently dropped position:relative
   from the page header on thirteen pages. */
header {
  position: relative; }

/* ============================================================================
   LAYOUT
   ============================================================================ */
main {
  flex: 1;
  display: block;
  margin-inline: auto;
  width: calc(min(var(--max-width-wide), 100% - var(--space-xl)));
  padding-block: var(--space-xl); }

.main-full-width {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0; }

main.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-block: 0; }

main > section {
  margin-inline: auto;
  width: calc(min(100% - var(--space-xl), 1450px)); }

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0;
  padding-left: 0; }

/* ============================================================================
   TYPOGRAPHY - Base
   ============================================================================ */
p,
h1, h2, h3, h4, h5, h6,
ul, ol, blockquote, pre, table, form {
  margin-bottom: var(--space-md); }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight); }

h1 {
  font-size: var(--text-3xl); }

h2 {
  font-size: var(--text-2xl); }

h3 {
  font-size: var(--text-xl); }

h4 {
  font-size: var(--text-lg); }

h5 {
  font-size: var(--text-md); }

h6 {
  font-size: var(--text-base); }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default); }

a:hover {
  color: var(--color-accent-light); }

a:focus {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm); }

ul, ol {
  padding-inline-start: 1.5rem; }

blockquote {
  padding-inline-start: var(--space-md);
  border-inline-start: 4px solid var(--color-accent); }

code {
  font-family: var(--font-mono); }

pre {
  overflow-x: auto;
  padding: var(--space-md);
  border-radius: var(--radius-md); }

em {
  color: var(--color-accent);
  font-style: normal; }

strong {
  font-weight: var(--weight-semibold); }

/* ============================================================================
   FORMS
   ============================================================================ */
button,
input,
select,
textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) 0.75rem;
  width: 100%;
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit; }

input,
select,
textarea {
  margin-bottom: var(--space-md); }

label {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: 0.375rem; }

button {
  width: auto;
  cursor: pointer;
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold); }

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--color-accent); }

/* ============================================================================
   SECTION HEADERS - Mindfront signature style
   ============================================================================ */
.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
  margin-top: var(--space-5xl); }

.section-header h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-sm); }

.section-header h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega); }

@media (max-width: 767px) {
  .section-header h2 {
    font-size: var(--text-3xl); }
  .section-header h3 {
    font-size: var(--text-lg); } }

/* ============================================================================
   UTILITIES
   ============================================================================ */
.is-hidden,
.hidden-by-default {
  display: none; }

[data-theme=light] .hide-light {
  display: none; }

.invert-colors {
  filter: invert(1); }

/* ============================================================================
   WORDMARK / BRAND
   ============================================================================ */
.mindfront-logo-text {
  margin-left: var(--space-sm);
  font-size: var(--text-xl);
  letter-spacing: 0.125em;
  font-weight: var(--weight-light);
  text-transform: uppercase; }

.mindfront-wordmark-inline {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase; }

.tm-symbol {
  font-size: 50%; }

.text-perimeter-blue {
  color: var(--color-accent-vibrant); }

/* ============================================================================
   TABLES
   ============================================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl); }

th, td {
  padding: var(--space-md);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-bg-alt); }

th {
  font-weight: var(--weight-bold);
  border-bottom-width: 2px; }

/* ============================================================================
   MISC LEGACY
   ============================================================================ */
header:has(> h2 + p) > h2 {
  margin-top: var(--space-3xl);
  text-transform: uppercase;
  font-weight: var(--weight-thin);
  letter-spacing: var(--tracking-mega); }

body > main > section.stop-fighting-systems-section > div > div.section-header {
  margin-top: var(--space-5xl); }

.ecosystem-logo a {
  position: relative;
  display: inline-block; }

.logo-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  color: rgba(0, 0, 0, 0.001);
  pointer-events: none;
  user-select: all; }

footer {
  margin-top: var(--space-3xl); }

/* --------------------------------------------------------------------------
   The landing page

   Its chrome at both ends is a black bar and its sections run edge to edge, so
   the page behind them is black too. Two things fall out: overscroll at either
   end shows the bar's own colour instead of a sliver of paper, and the footer
   stops floating 4rem below the last section on a gap that only made sense
   when the footer was ordinary content.
   -------------------------------------------------------------------------- */
html.page--bleed,
html.page--bleed body {
  background: #000; }

html.page--bleed footer {
  margin-top: 0; }

/* The homepage is a sequence of complete scenes. Proximity snapping lets the
   nearest scene settle beneath the fixed chrome when scrolling naturally ends,
   while preserving native wheel and touch momentum. There is deliberately no
   scripted scroll and no mandatory stop: a fast gesture can cross a scene. */
html.page--bleed {
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--chrome-top); }

html.page--bleed main > section {
  scroll-snap-align: start;
  scroll-snap-stop: normal; }

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  header, footer, .codex-sidebar, .codex-toc, .codex-mobile-bar,
  .lost-canvas, .lost-scanlines, canvas, .command-bar-footer,
  nav, .mobile-nav, .mobile-nav-overlay {
    display: none !important; }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt; }
  .codex-main, .codex-layout {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666; }
  pre {
    white-space: pre-wrap;
    border: 1px solid #ccc;
    padding: 0.5em; }
  img {
    max-width: 100% !important; } }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html.page--bleed {
    scroll-behavior: auto;
    scroll-snap-type: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; }
  canvas {
    opacity: 0.3; } }

/*
  ___ _            _            _  _               
 / __(_)_ __  _ __| |___ _ _   | \| |___ _ _ _ __  
 \__ \ | '  \| '_ \ / _ \ ' \  | .` / _ \ '_| '  \ 
 |___/_|_|_|_| .__/_\___/_||_| |_|\_\___/_| |_|_|_|
             |_|                                   
*/
/* SimplonNorm Light */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Light-WebS.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

/* SimplonNorm Light Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-LightItalic-WebS.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap; }

/* SimplonNorm Regular */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Regular-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

/* SimplonNorm Regular Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-RegularItalic-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap; }

/* SimplonNorm Medium */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Medium-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

/* SimplonNorm Medium Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-MediumItalic-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap; }

/* SimplonNorm Bold */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Bold-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }

/* SimplonNorm Bold Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-BoldItalic-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap; }

/* NewPanamSkyline Black */
@font-face {
  font-family: 'NewPanamSkyline';
  src: url("/fonts/NewPanamSkyline-Black-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

/* ==========================================================================
   Header
   BEM: .header, .header__*, .header--*

   A black bar of fixed height. The mark is sized to the CTA so the circle's
   top and the triangle's base land on the button's edges, and the wordmark is
   set in the same face and size as the destinations so it reads as one line
   of type with them.
   ========================================================================== */
/* The wrapper is what sticks, not the bar inside it.

   baseof wraps the partial in <header class="container-fluid">, and that
   wrapper is the flex item of the body column. A sticky element can only
   travel inside its own containing block, so a sticky .header was confined to
   a box exactly its own height and scrolled away with the wrapper. It has
   never actually stuck. Sticking the wrapper gives it the whole document to
   travel in. `header` alone is (0,0,1) in landing_page.css; this is (0,1,1). */
header.container-fluid {
  position: sticky;
  top: 0;
  z-index: 100; }

.header {
  --bar-h: var(--chrome-top);
  --mark-h: 38px;
  --bar-pad: 4rem;
  /* --color-text is #1a202c, a navy-grey. The bar is black. */
  --bar-bg: var(--color-ink);
  --bar-fg: var(--color-paper);
  --bar-rule: rgba(255, 255, 255, 0.2);
  --bar-label: #dce1e6;
  --bar-util: #9aa1a9;
  /* The blue the nav icons are drawn in. The design system's --color-accent
     (#2868b4) is the older, muted one and does not match them. */
  --bar-action: #3b82f6;
  position: relative;
  background: var(--bar-bg);
  color: var(--bar-fg);
  /* Light type on a dark field renders fat under subpixel antialiasing. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.header__nav {
  display: flex;
  align-items: center;
  height: var(--bar-h);
  /* Full bleed: the bar is chrome, not a column of the page, so it hangs on
     the viewport edges rather than the content container's 1400px cap. */
  padding: 0 var(--bar-pad); }

/* --------------------------------------------------------------------------
   Logo: mark plus wordmark set as live type
   -------------------------------------------------------------------------- */
.header__logo {
  display: inline-flex;
  align-items: center;
  /* Half the space beneath the triangle, measured from its base corner. */
  gap: calc((var(--bar-h) - var(--mark-h)) / 4);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit; }

.header__logo svg {
  display: block;
  height: var(--mark-h);
  width: auto;
  fill: currentColor; }

.header__wordmark {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap; }

/* --------------------------------------------------------------------------
   Nav group, one segmented strip of ruled cells
   -------------------------------------------------------------------------- */
.header__group {
  display: flex;
  margin-left: auto;
  align-self: stretch; }

.header__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 1.125rem;
  border-left: 1px solid var(--bar-rule);
  color: var(--bar-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; }

.header__link:first-child {
  border-left: 0; }

.header__link:hover {
  background: var(--bar-fg);
  color: var(--bar-bg); }

/* The travelling dot in the integration mark is white for a dark bar; invert
   it when the cell it sits in inverts. */
.header__link:hover .header__icon circle[fill="var(--color-paper)"] {
  fill: var(--bar-bg); }

.header__link--util {
  color: var(--bar-util); }

.header__icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0; }

.header__icon svg {
  display: block;
  width: 100%;
  height: 100%; }

/* --------------------------------------------------------------------------
   Call to action, the start of having it, and the only filled object
   -------------------------------------------------------------------------- */
.header__cta {
  display: flex;
  align-items: center;
  margin-left: 3rem;
  padding: 0 1.375rem;
  height: var(--mark-h);
  background: var(--bar-action);
  color: var(--bar-fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; }

.header__cta:hover {
  background: var(--bar-fg);
  color: var(--bar-bg); }

/* One CTA slot, two actions. Above the hamburger breakpoint the bar asks for
   the buying decision; below it, for the meeting. Swapped at the same 880px
   the desktop strip disappears at, so the bar only ever holds one of them. */
.header__cta--book {
  display: none; }

/* Short labels: the desktop bar carries the propositions in full. */
.header__text-short {
  display: none; }

/* --------------------------------------------------------------------------
   Hamburger (mobile only)
   -------------------------------------------------------------------------- */
.header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  /* A flex item by default gives width up before anything else does. On a
     320px phone that squeezed the only way into the nav down to 18px. */
  flex-shrink: 0;
  padding: var(--space-sm);
  background: none;
  border: 1px solid var(--bar-rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default); }

.header__hamburger:hover {
  background: rgba(255, 255, 255, 0.1); }

/* The bar is black. --color-text is the page's navy, which put the only way
   into the nav on a phone at about 1.2:1 against its own background. */
.header__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--bar-fg);
  border-radius: 1px;
  transition: all var(--duration-normal) var(--ease-default); }

.header__hamburger--active .header__hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px); }

.header__hamburger--active .header__hamburger-line:nth-child(2) {
  opacity: 0; }

.header__hamburger--active .header__hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px); }

/* --------------------------------------------------------------------------
   Mobile Nav Sidebar
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 85vw;
  max-width: 320px;
  height: 100vh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-default);
  z-index: 200;
  display: flex;
  flex-direction: column; }

.mobile-nav--open {
  transform: translateX(0); }

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border); }

.mobile-nav__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary); }

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-default); }

.mobile-nav__close:hover {
  color: var(--color-text); }

.mobile-nav__close svg {
  width: 1.25rem;
  height: 1.25rem; }

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) 0;
  overflow-y: auto; }

.mobile-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-default); }

.mobile-nav__link:hover {
  background: var(--color-bg-alt); }

.mobile-nav__link--signature {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse); }

.mobile-nav__link--signature:hover {
  background: var(--color-bg-dark-hover); }

/* The menu's primary action. Weight alone left it the quietest thing in the
   list, below three signature links carrying a dark fill, the hierarchy read
   backwards against desktop. */
.mobile-nav__link--cta {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold); }

.mobile-nav__link--cta:hover {
  background: var(--color-bg-dark); }

.mobile-nav__link--cta .mobile-nav__icon svg {
  fill: currentColor; }

.mobile-nav__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }

.mobile-nav__icon svg {
  width: 100%;
  height: 100%; }

.mobile-nav__link--signature .mobile-nav__icon svg {
  fill: currentColor; }

/* --------------------------------------------------------------------------
   Mobile Nav Overlay
   -------------------------------------------------------------------------- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-default), visibility var(--duration-normal) var(--ease-default);
  z-index: 199; }

.mobile-nav-overlay--visible {
  opacity: 1;
  visibility: visible; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* Between the mobile switch and ~1380px the propositions outgrow the row.
   Shorten the labels rather than hide the nav.

   880 is measured, not chosen: the strip with short labels lays out at 871px,
   so anything narrower pushed the CTA past the right edge and gave every page
   a horizontal scrollbar, a phone in landscape and an iPad in portrait both
   land in that band. */
@media (min-width: 880px) and (max-width: 1379px) {
  .header {
    --bar-pad: 2rem; }
  .header__link {
    padding: 0 0.875rem; }
  .header__text {
    display: none; }
  .header__text-short {
    display: inline; }
  .header__cta {
    margin-left: 1.5rem; } }

@media (max-width: 879px) {
  .header {
    --bar-pad: var(--space-md);
    --mark-h: 30px; }
  .header__nav {
    /* Keep the rendered bar equal to --chrome-top. Auto height came out at
       56px, leaving four pixels of the previous section visible when a scene
       snapped to the token's 60px offset. */
    height: var(--bar-h);
    padding: var(--space-sm) var(--bar-pad);
    justify-content: space-between; }
  /* The strip becomes the hamburger's job. */
  .header__group--desktop {
    display: none; }
  .header__cta {
    height: 34px;
    margin-left: auto;
    margin-right: var(--space-md);
    padding: 0 0.875rem;
    font-size: var(--text-xs); }
  .header__cta--buy {
    display: none; }
  .header__cta--book {
    display: flex; }
  .header__hamburger {
    display: flex; } }

/* The mark alone below 375. The wordmark, the CTA and the hamburger together
   need about 355px of bar, and what is left at 360 puts the wordmark against
   the button with six pixels between them. The mark still says who this is. */
@media (max-width: 374px) {
  .header__wordmark {
    display: none; } }

/* Hide mobile nav elements on desktop */
@media (min-width: 880px) {
  .mobile-nav,
  .mobile-nav-overlay {
    display: none; } }

/* ---------------------------------------------------------------------------
   Brighter than white

   CSS cannot express a colour past pure white; the HDR colour spaces in CSS Color
   HDR are still a draft. HDR *content* can, so the wordmark is painted through
   a 64px gain-map JPEG instead: background-clip turns the glyphs into a window
   onto an image whose ISO 21496-1 gain map licences up to 7.5x (+2.9 stops) of
   headroom. The base pixels of that file are plain white, so anything that
   ignores the map still gets white.

   Gated twice on purpose. dynamic-range:high keeps SDR displays, Firefox and
   print on a real colour with no extra fetch. The @supports guard keeps the
   text visible if background-clip is missing, since colour:transparent with no
   painted background is an invisible logo.
   Swatch generated by tools/gainmap.swift, not fetched from anywhere.
   --------------------------------------------------------------------------- */
@media (dynamic-range: high) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .header__wordmark {
      background: url("/hdr/white-7.5x.jpg") center/cover;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent; }
    /* transparent ink has no selection colour of its own */
    .header__wordmark::selection {
      color: var(--bar-bg);
      background: var(--bar-fg); } } }

/* The mark, same trick as the wordmark above but masked rather than clipped.
   An SVG cannot be background-clipped, so the element paints the gain-map
   JPEG across its box and the mark's own file cuts the shape out of it. The
   published URL is the same asset that is inlined into the markup, so the
   shape and the mask can never disagree; data-mark-src on the anchor records
   the coupling. fill:transparent only inside the query, so the SDR mark is
   still an ordinary currentColor glyph. */
@media (dynamic-range: high) {
  @supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .header__logo svg {
      fill: transparent;
      background: url("/hdr/white-7.5x.jpg") center/cover;
      -webkit-mask: url("/svg/mf-logo-only.svg") center/contain no-repeat;
      mask: url("/svg/mf-logo-only.svg") center/contain no-repeat; } } }

/* ==========================================================================
   The bottom bar

   A solid black strip matching the header: same gutters, same hairline. Third-
   party proof on one line, small caps, a rule between each. No boxes, a
   bordered chip asks to be noticed, and these are meant to read as facts that
   happen to be there.
   ========================================================================== */
.command-bar-footer {
  --bar-rule: rgba(255, 255, 255, 0.2);
  --bar-label: rgba(255, 255, 255, 0.62);
  --bar-quiet: rgba(255, 255, 255, 0.4);
  --bar-pad: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Held to the token so a full-height section can subtract a known number and
     land exactly on the frame. */
  min-height: var(--chrome-bottom);
  box-sizing: border-box;
  padding: var(--space-md) var(--bar-pad);
  background-color: var(--color-ink);
  border-top: 1px solid var(--bar-rule);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.78125rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bar-quiet); }

.footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-lg); }

.footer-right {
  display: flex;
  align-items: center;
  gap: 0; }

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.375rem;
  line-height: 1;
  border-left: 1px solid var(--bar-rule);
  color: var(--bar-label);
  text-decoration: none; }

/* The rule is a separator, not a frame: none before the first, and the last
   one closes flush with the gutter. */
.footer-badge:first-child {
  border-left: 0;
  padding-left: 0; }

.footer-badge:last-child {
  padding-right: 0; }

/* The rating reads as the fact, not as a status colour. */
.footer-badge ins {
  font-weight: var(--weight-bold);
  color: var(--color-paper);
  text-decoration: none; }

a.footer-badge:hover {
  color: var(--color-paper); }

.footer-icon {
  width: 1em;
  height: 1em; }

.footer-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor; }

/* Five proofs plus the copyright is more than one line will hold much under
   this, and the row has no give in it. */
@media (max-width: 1100px) {
  .command-bar-footer {
    --bar-pad: var(--space-md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md); }
  /* Wrapped, the separators stop meaning anything, a rule would land at the
     start of the second row. Space does the work instead.

     The badges are 13px of type; the padding is what makes them a target a
     thumb can hit without magnifying the row. Negative margin keeps the row
     reading at the same rhythm as the copyright beside it. */
  .footer-right {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin: -0.6rem 0; }
  .footer-badge {
    border-left: 0;
    padding: 0.6rem 0; } }

@media (max-width: 768px) {
  .command-bar-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    justify-content: stretch;
    gap: var(--space-xs);
    height: var(--chrome-bottom-mobile);
    min-height: 0;
    padding: var(--space-xs) var(--space-md) calc(var(--space-xs) + env(safe-area-inset-bottom));
    font-size: 0.625rem;
    letter-spacing: 0.08em; }
  .footer-left,
  .footer-right {
    width: 100%; }
  .footer-left {
    justify-content: center;
    gap: 0;
    font-size: 0.5625rem;
    line-height: 1;
    white-space: nowrap; }
  .footer-right {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--bar-rule); }
  .footer-badge,
  .footer-badge:first-child,
  .footer-badge:last-child {
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-xs);
    border-left: 1px solid var(--bar-rule);
    line-height: 1;
    white-space: nowrap; }
  .footer-badge:first-child {
    border-left: 0; }
  .footer-badge__label {
    font-size: 0; }
  .footer-badge__label::after {
    content: attr(data-short);
    font-size: 0.5625rem; }
  .footer-icon {
    width: 0.875em;
    height: 0.875em; }
  /* The revision is the only proof without a short grade. Give it the room
     left by the shorter scanner values without turning the bar into rows. */
  .footer-badge--revision {
    font-size: 0.5625rem; }
  .footer-badge--revision .footer-icon {
    display: none; } }

/* Single Page Layout - Mindfront prose styling */
.page-single {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg); }

/* Page Header */
.page-header {
  margin-bottom: var(--space-3xl);
  text-align: center; }

.page-title {
  font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  line-height: var(--leading-none);
  margin: 0;
  color: var(--color-text);
  text-transform: uppercase; }

.page-date {
  display: inline-block;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega); }

.page-reading-time {
  display: inline-block;
  margin-top: var(--space-lg);
  margin-left: var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega); }

/* Page Content - base styles */
.page-content {
  font-size: var(--prose-base);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary); }

/* Spacing between direct prose children only */
.page-content > * + * {
  margin-top: 1.75em; }

/* Lead paragraph - direct child only */
.page-content > p:first-child {
  font-size: var(--prose-lg);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  text-align: center;
  max-width: var(--max-width-prose);
  margin: 0 auto var(--space-2xl); }

/* Paragraphs - direct children only */
.page-content > p {
  font-weight: var(--weight-light);
  max-width: var(--max-width-prose); }

/* Headings - direct children only (won't affect shortcode components) */
.page-content > h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  margin-top: var(--space-4xl);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border); }

.page-content > h2:first-of-type {
  margin-top: var(--space-2xl); }

.page-content > h3 {
  font-size: var(--prose-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md); }

.page-content > h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm); }

/* Strong/Bold - keep global for prose */
.page-content strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text); }

/* Links - direct children only */
.page-content > a,
.page-content > p a,
.page-content > li a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: all var(--duration-fast) var(--ease-default); }

.page-content > a:hover,
.page-content > p a:hover,
.page-content > li a:hover {
  color: var(--color-accent); }

/* Lists - direct children only */
.page-content > ul {
  list-style: none;
  padding-left: 0;
  margin: 0; }

.page-content > ul > li {
  position: relative;
  padding-left: 1.75em;
  margin-top: 1em; }

.page-content > ul > li:first-child {
  margin-top: 0; }

.page-content > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px; }

.page-content > ol {
  padding-left: 1.5em;
  margin: 0; }

.page-content > ol > li {
  margin-top: 1em;
  padding-left: var(--space-sm); }

.page-content > ol > li:first-child {
  margin-top: 0; }

.page-content > ol > li::marker {
  font-weight: var(--weight-bold);
  color: var(--color-accent); }

.page-content li > ul,
.page-content li > ol {
  margin-top: 0.75em; }

/* Blockquotes - direct children only */
.page-content > blockquote {
  position: relative;
  margin: var(--space-2xl) 0;
  padding: var(--space-lg) 0 var(--space-lg) var(--space-xl);
  border-left: 4px solid var(--color-accent); }

.page-content > blockquote p {
  font-size: var(--prose-lg);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--color-text);
  margin: 0;
  max-width: none; }

/* Code - direct children only */
.page-content > code,
.page-content > p code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-bg-alt);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  border: 1px solid var(--color-border); }

.page-content > pre {
  background: var(--color-bg-dark);
  color: var(--color-text-muted);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-2xl) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed); }

.page-content > pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  border: none; }

/* Horizontal rules - direct children only */
.page-content > hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-3xl) 0; }

/* Images - direct children only */
.page-content > img,
.page-content > p > img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--space-2xl) 0;
  box-shadow: var(--shadow-md); }

/* Tables - direct children only */
.page-content > table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  margin: var(--space-2xl) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden; }

.page-content > table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border); }

.page-content > table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border); }

.page-content > table tbody tr:last-child td {
  border-bottom: none; }

.page-content > table tbody tr:hover {
  background: var(--color-bg-alt); }

/* Responsive */
@media (max-width: 768px) {
  .page-single {
    padding: var(--space-2xl) var(--space-md); }
  .page-title {
    font-size: var(--text-3xl); }
  .page-content {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed); }
  .page-content > p:first-child {
    font-size: var(--text-lg);
    text-align: left; }
  .page-content > h2 {
    font-size: var(--text-base);
    margin-top: var(--space-2xl); }
  .page-content > h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-xl); }
  .page-content > blockquote p {
    font-size: var(--text-md); } }

@media (max-width: 480px) {
  .page-single {
    padding: var(--space-xl) var(--space-sm); }
  .page-title {
    font-size: var(--text-2xl); }
  .page-content {
    font-size: var(--text-base); } }