/* Meridian Flow Capital website, shared system.
   One palette (tokens bound verbatim from Design System/DESIGN.md v1.3), one type family
   (Plus Jakarta Sans, OFL, self-hosted), no corner radii, no shadows, no gradients.
   Every page opens on a deep navy field (header plus page head) and runs light below. */

@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:fallback}

:root{
  --bg: oklch(98% .008 245);
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96% .010 240);
  --fg: oklch(34% .05 249);
  --ink-2: oklch(47% .04 252);
  --muted: oklch(64% .03 255);
  --border: oklch(88% .018 245);
  --navy: #264566;
  --navy-deep: #0B2438;
  --teal: #219EBC;
  --teal-ink: oklch(47% .10 228);
  --teal-light: oklch(78% .10 215);
  --on-navy: oklch(97% .006 240);
  --on-navy-2: oklch(87% .02 240);
  --rule-dark: oklch(100% 0 0 / .14);

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.35rem + 3.3vw, 4.125rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 2.3vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.35vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec: var(--s9);
  --container:1200px;
  --gutter:clamp(16px, 4.2vw, 32px);
  --header-h:72px;
  --ease:cubic-bezier(.22, 1, .36, 1);
}
@media (max-width:899.98px){ :root{ --header-h:64px; --sec: var(--s8) } }

*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + var(--s4))}
body{margin:0; background:var(--surface); color:var(--fg); font:400 1rem/1.6 var(--font); -webkit-font-smoothing:antialiased}
img, svg, video{display:block; max-width:100%}
h1, h2, h3{margin:0; color:var(--navy); font-weight:600; text-wrap:balance}
h1{font-size:var(--fs-h1); line-height:1.06; letter-spacing:-.025em}
h2{font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.02em}
h3{font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em}
p, ul, ol, dl, dd, figure{margin:0}
p{text-wrap:pretty}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--teal-ink); outline-offset:3px}
.shell{width:min(100% - 2 * var(--gutter), var(--container)); margin-inline:auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:var(--s4); top:-80px; z-index:60; background:var(--on-navy); color:var(--navy-deep); padding:var(--s3) var(--s4); font-weight:600; text-decoration:none}
.skip:focus{top:var(--s3)}
.i{width:20px; height:20px; fill:currentColor; flex:none}

/* Navy fields: header, page heads, closing bands and the emphasis field. */
.on-navy{background:var(--navy-deep); color:var(--on-navy-2)}
.on-navy h1, .on-navy h2, .on-navy h3{color:var(--on-navy)}
.on-navy :focus-visible{outline-color:var(--teal-light)}

/* Buttons: square; navy primary on light fields, light primary on navy fields; one solid button per action. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px; border:1px solid transparent; border-radius:0; font:600 16px/1 var(--font); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease)}
.btn-primary{background:var(--navy); color:var(--on-navy)}
.btn-primary:hover{background:var(--navy-deep)}
.btn-secondary{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn-secondary:hover{background:var(--surface-2)}
.on-navy .btn-primary{background:var(--on-navy); color:var(--navy-deep)}
.on-navy .btn-primary:hover{background:var(--on-navy-2)}
.on-navy .btn-secondary{color:var(--on-navy); border-color:oklch(100% 0 0 / .45)}
.on-navy .btn-secondary:hover{background:oklch(100% 0 0 / .06); border-color:var(--on-navy)}
html:not(.has-motion) .btn:active{transform:translateY(1px)}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
@media (max-width:479.98px){ .cta-row .btn{flex:1 1 100%} }

.text-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--teal-ink); font-weight:600; text-decoration:none}
.text-link:hover{text-decoration:underline; text-underline-offset:4px}
.text-link .i{width:18px; height:18px; transition:transform .2s var(--ease)}
.text-link:hover .i, .text-link:focus-visible .i{transform:translateX(3px)}
.after-link{margin-top:var(--s6)}

/* Header and navigation: W3C APG disclosure pattern below 900px, inline links above. */
.site-header{position:sticky; top:0; z-index:50; background:var(--navy-deep); border-bottom:1px solid var(--rule-dark)}
.bar{position:relative; display:flex; align-items:center; gap:var(--s5); min-height:var(--header-h)}
.brand{display:inline-flex; align-items:center; flex:none; color:var(--on-navy); padding:var(--s1) 0}
.brand .logo{height:40px; width:auto}
.menu-toggle{display:none; margin-left:auto; align-items:center; gap:var(--s2); min-height:44px; padding:0 var(--s3); background:transparent; color:var(--on-navy); border:1px solid oklch(100% 0 0 / .3); border-radius:0; font:600 15px/1 var(--font); cursor:pointer}
.menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-menu{display:none}
.menu-toggle[aria-expanded="true"] .i-close{display:block}
.site-nav{display:flex; align-items:center; flex:1; min-width:0}
.site-nav ul{display:flex; align-items:center; gap:var(--s6); list-style:none; margin:0 0 0 auto; padding:0}
.site-nav ul a{position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--on-navy-2); font:500 15px/1 var(--font); text-decoration:none}
.site-nav ul a:hover, .site-nav ul a[aria-current="page"]{color:var(--on-navy)}
/* Underline indicator: a 2px bar scaled from the left (pattern from navigation-menu-05, MIT). */
.site-nav ul a::after{content:""; position:absolute; left:0; right:0; bottom:8px; height:2px; background:var(--teal-light); transform:scaleX(0); transform-origin:left center; transition:transform .25s var(--ease)}
.site-nav ul a:hover::after, .site-nav ul a:focus-visible::after, .site-nav ul a[aria-current="page"]::after{transform:scaleX(1)}
.site-header :focus-visible{outline-color:var(--teal-light)}
.nav-cta{display:none; margin-left:var(--s6); background:transparent; color:var(--on-navy); border-color:oklch(100% 0 0 / .45); min-height:44px}
.nav-cta:hover{background:oklch(100% 0 0 / .06); border-color:var(--on-navy)}
@media (min-width:1100px){ .nav-cta{display:inline-flex} }
@media (max-width:899.98px){
  .brand .logo{height:36px}
  .js .menu-toggle{display:inline-flex}
  .js .site-nav{position:absolute; left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter)); top:100%; display:none; flex-direction:column; align-items:stretch; padding:var(--s2) var(--gutter) var(--s5); background:var(--navy-deep); border-bottom:1px solid var(--rule-dark)}
  .js .site-nav.is-open{display:flex}
  .js .site-nav ul{flex-direction:column; align-items:stretch; gap:0; margin:0}
  .js .site-nav ul a{display:flex; min-height:52px; font-size:17px; color:var(--on-navy); border-bottom:1px solid var(--rule-dark)}
  .js .site-nav ul a::after{display:none}
  .js .site-nav ul a[aria-current="page"]{font-weight:600; box-shadow:inset 3px 0 0 var(--teal-light); padding-left:var(--s4)}
  .js .nav-cta{display:flex; width:100%; margin:var(--s5) 0 0; background:var(--on-navy); color:var(--navy-deep); border-color:var(--on-navy)}
  html:not(.js) .site-header{position:static}
  html:not(.js) .bar{flex-wrap:wrap; row-gap:0; padding-bottom:var(--s2)}
  html:not(.js) .site-nav{flex-basis:100%}
  html:not(.js) .site-nav ul{flex-wrap:wrap; gap:0 var(--s5); margin:0}
}

/* Page head: the navy field that opens every inner page. */
.page-head{padding:var(--s8) 0 var(--s8)}
.page-head h1{max-width:22ch}
.page-head .lede{margin-top:var(--s5); font-size:var(--fs-lead); line-height:1.55; max-width:52ch}
@media (max-width:899.98px){ .page-head{padding:var(--s7) 0} }

/* Generic sections */
.sec{padding:var(--sec) 0}
.sec + .sec{padding-top:0}
.sec.tint{background:var(--surface-2)}
.sec.tint + .sec, .sec + .sec.tint{padding-top:var(--sec)}
.sec-head{max-width:46rem}
.lead{margin-top:var(--s4); font-size:var(--fs-lead); line-height:1.55; max-width:52ch}
.rule{display:block; width:72px; height:12px; color:var(--teal); margin-bottom:var(--s4)}
.on-navy .rule{color:var(--teal-light)}
.note{font-size:14px; line-height:1.6; color:var(--ink-2); max-width:62ch}

/* Numbered checklist with the contract's mono numerals. */
.checklist{list-style:none; margin:var(--s6) 0 0; padding:0; counter-reset:item; display:grid; gap:0 var(--s7)}
.checklist li{counter-increment:item; display:grid; grid-template-columns:40px minmax(0, 1fr); gap:var(--s3); padding:var(--s4) 0; border-top:1px solid var(--border)}
.checklist li::before{content:counter(item, decimal-leading-zero); font:600 14px/1.6 var(--mono); color:var(--teal-ink)}
@media (min-width:900px){ .checklist.cols-2{grid-template-columns:1fr 1fr} }

/* What the company does not claim or perform. */
.not-list{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; gap:0 var(--s7); border-top:2px solid var(--navy)}
.not-list li{display:grid; grid-template-columns:24px minmax(0, 1fr); gap:var(--s3); padding:var(--s4) 0; border-bottom:1px solid var(--border)}
.not-list .i{margin-top:3px; color:var(--ink-2)}
@media (min-width:900px){ .not-list{grid-template-columns:1fr 1fr} }

/* Label and value facts. */
.facts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 var(--s6); margin-top:var(--s6); border-top:2px solid var(--navy)}
.facts > div{padding:var(--s4) 0; border-bottom:1px solid var(--border)}
.facts dt{font:600 14px/1.4 var(--font); color:var(--ink-2)}
.facts dd{margin-top:var(--s1); color:var(--navy); font-weight:600}
.num{font-family:var(--mono); font-weight:600; letter-spacing:0}
@media (max-width:1099.98px){ .facts{grid-template-columns:1fr 1fr} }
@media (max-width:559.98px){ .facts{grid-template-columns:1fr} }

.principles{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 var(--s7); margin-top:var(--s6)}
.principle{padding:var(--s5) 0; border-top:1px solid var(--border)}
.principle h3{font-size:1.1875rem}
.principle p{margin-top:var(--s2); max-width:52ch}
@media (max-width:767.98px){ .principles{grid-template-columns:1fr} }

/* Emphasis: one navy field carrying one sentence (brand contract, section 5). */
.statement{margin-top:var(--s6); padding:var(--s7); background:var(--navy); color:var(--on-navy); font-size:clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height:1.5; max-width:none}
@media (max-width:559.98px){ .statement{padding:var(--s6) var(--s5)} }

/* Closing band */
.cta-band{padding:var(--s8) 0}
.cta-grid{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--s6) var(--s8); align-items:end}
.cta-grid h2{max-width:24ch}
.cta-grid p{margin-top:var(--s3); max-width:52ch}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--s3)}
@media (max-width:899.98px){ .cta-grid{grid-template-columns:1fr; align-items:start} }
@media (max-width:479.98px){ .cta-actions .btn{flex:1 1 100%} }

/* Footer: light closing field with the company particulars and the important notice. */
.site-footer{border-top:1px solid var(--border); padding:var(--s8) 0 var(--s6); font-size:15px; color:var(--fg)}
.f-top{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .6fr) minmax(0, 1.7fr); gap:var(--s7)}
.f-brand{display:grid; gap:var(--s3); align-content:start}
.f-brand .brand{color:var(--navy)}
.f-brand a:not(.brand){color:var(--teal-ink)}
.f-h{font:600 15px/1.3 var(--font); color:var(--navy); margin-bottom:var(--s3); letter-spacing:0}
.f-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s1)}
.f-nav a{display:inline-flex; align-items:center; min-height:32px; text-decoration:none; color:var(--fg)}
.f-nav a:hover{color:var(--navy); text-decoration:underline; text-underline-offset:4px}
.f-notice p + p{margin-top:var(--s3)}
.f-notice p{color:var(--ink-2); max-width:66ch}
.legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s6); margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--border); font-size:14px; color:var(--ink-2)}
.legal a{color:var(--teal-ink)}
@media (max-width:899.98px){ .f-top{grid-template-columns:1fr 1fr} .f-notice{grid-column:1 / -1} }
@media (max-width:559.98px){ .f-top{grid-template-columns:1fr} }

/* Motion gate: hidden only while the head script's .intro class is present (cleared by JS or a 900ms timer). */
.intro [data-enter], .intro [data-anim]{opacity:0}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition-duration:.01ms !important; scroll-behavior:auto !important}
}
@media print{
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .site-header{position:static}
  [data-enter], [data-anim]{opacity:1 !important; transform:none !important}
}