/* ============================================================
   MCF LEGAL PAGES (2026-10-25, Alicia "legal A"): Privacy Policy, Terms of
   Use and Cookie Policy, drawn by templates/legal-*.php behind the
   `mcf_legal` switch. The same approved policies as MCE, in MCE's legal page
   design: a contents list beside the text on desktop, folded above it from
   1024 down, tables stacking into labelled rows under 560.
   The look is MCE's live legal pages as visitors see them, measured
   2026-10-25 (mce-child custom.css .lgpage + Alicia's saved legal sizes:
   title 48 / 600, section headings 26, text 17; the table grid lines and
   alternate-row tint come from the parent theme's reset on MCE and are
   written out here, so MCF draws them whatever loads around it).
   Its own tokens (--lg-*), read by this sheet alone: nothing here reaches
   another page, and no other page's token reaches this one (tokens/main/
   custom.css are not loaded here). Every rule is scoped to #edWrap.mcflg,
   which only the legal templates print.
   Narrow screens SCALE a Global number with a named multiplier, never replace
   it. The layout follows #edWrap's width (container "lg"), so the panel's
   iPad and Phone buttons show the real iPad and phone layouts.
   ============================================================ */
/* Roboto Flex, served from the theme (the same file chrome.css declares), so the page draws in it even with the theme header off. */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:300 700;font-stretch:100%;font-display:swap;src:url(../fonts/roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* text sizes */
  --lg-h1:48px;          /* the page title */
  --lg-h1-w:600;         /* its weight (unitless) */
  --lg-h2:26px;          /* section headings */
  --lg-body:17px;        /* paragraphs and lists */
  --lg-eye:14px;         /* "Mission Critical Engineers Ltd." above the title */
  --lg-upd:15px;         /* "Last updated" */
  --lg-toc-h:12px;       /* "Contents" */
  --lg-toc-fs:14px;      /* the contents links */
  --lg-table:15px;       /* tables */
  /* colours */
  --lg-ink:#1C244B;      /* title, section headings, table headings, a contents link on hover */
  --lg-text:#324A6D;     /* paragraphs, lists, table cells, contents links */
  --lg-gold:#815C00;     /* the eyebrow; a contents link's edge on hover */
  --lg-mute:#646B80;     /* "Last updated" and "Contents" */
  --lg-link:#5186F7;     /* links in the text */
  --lg-rule:#DFE3EC;     /* the line under the masthead, the contents rule, table row lines */
  --lg-thbg:#F3F5F8;     /* table heading row */
  --lg-bg:#FFFFFF;       /* the page */
  /* layout */
  --lg-wrap:1120px;      /* the page, side padding included */
  --lg-toc:250px;        /* the contents column (desktop) */
  --lg-measure:760px;    /* the text column (desktop) */
  --lg-col-gap:56px;     /* between the two (desktop) */
  --lg-gap-h2:44px;      /* above a section heading */
  --lg-gap-p:16px        /* below a paragraph or list */
}

/* base: Elementor's kit and the parent theme's reset style bare tags site-wide, so every part sets what it draws */
#edWrap.mcflg{container:lg / inline-size;background:var(--lg-bg);color:var(--lg-text);font-family:var(--font,"Roboto Flex",system-ui,-apple-system,"Segoe UI",Arial,sans-serif);font-size:var(--lg-body);line-height:1.72;-webkit-font-smoothing:antialiased;margin:0;padding:0 0 25px}
#edWrap.mcflg *,#edWrap.mcflg *::before,#edWrap.mcflg *::after{box-sizing:border-box}
#edWrap.mcflg :is(h1,h2,p,ul,ol,li,section,nav,div,table,th,td,a,b,i){font-family:inherit;letter-spacing:normal;text-transform:none}
#edWrap.mcflg :is(h1,h2,p,ul,ol,li,section,nav){margin:0;padding:0}
#edWrap.mcflg b{font-weight:700}
#edWrap.mcflg i{font-style:italic}

/* narrow-screen multipliers and side padding (not panel controls); set on the sections, which a container query can style */
#edWrap.mcflg > *{--lg-h1-mul:1;--lg-h2-mul:1;--lg-table-mul:1;--lg-side:10px}
@container lg (max-width:1200px){#edWrap.mcflg > *{--lg-side:30px}}
@container lg (max-width:1024px){#edWrap.mcflg > *{--lg-h1-mul:.75;--lg-h2-mul:.9}}
@container lg (max-width:560px){#edWrap.mcflg > *{--lg-h1-mul:.625;--lg-h2-mul:.85;--lg-table-mul:calc(14 / 15);--lg-side:20px}}

#edWrap.mcflg .wrap{width:100%;max-width:var(--lg-wrap);margin:0 auto;padding:0 var(--lg-side)}
#edWrap.mcflg .lghead{padding:72px 0 28px;margin:0;border-bottom:1px solid var(--lg-rule)}
#edWrap.mcflg .lgeye{margin:0 0 10px;font-size:var(--lg-eye);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--lg-gold)}
#edWrap.mcflg .lghead h1{margin:0;font-size:calc(var(--lg-h1) * var(--lg-h1-mul));font-weight:var(--lg-h1-w);line-height:1.15;color:var(--lg-ink);text-align:left}
#edWrap.mcflg .lgupd{margin:12px 0 0;font-size:var(--lg-upd);color:var(--lg-mute)}
#edWrap.mcflg .lgbody{padding:40px 0 96px;margin:0}
#edWrap.mcflg .lgcols{display:grid;grid-template-columns:var(--lg-toc) minmax(0,var(--lg-measure));column-gap:var(--lg-col-gap);align-items:start}
#edWrap.mcflg .lgtoc{position:sticky;top:110px}
#edWrap.mcflg .lgtoc-h{margin:0 0 10px;font-size:var(--lg-toc-h);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--lg-mute)}
#edWrap.mcflg .lgtoc ol{margin:0;padding:0;list-style:none;border-left:2px solid var(--lg-rule)}
#edWrap.mcflg .lgtoc li{margin:0;padding:0}
#edWrap.mcflg .lgtoc a{display:block;padding:6px 0 6px 14px;font-size:var(--lg-toc-fs);line-height:1.35;color:var(--lg-text);text-decoration:none;background:none;border-left:2px solid transparent;margin-left:-2px}
#edWrap.mcflg .lgtoc a:hover{color:var(--lg-ink);border-left-color:var(--lg-gold)}
#edWrap.mcflg .lgtext{min-width:0}
#edWrap.mcflg .lgtext>p,#edWrap.mcflg .lgtext>ul,#edWrap.mcflg .lgtext>ol{font-size:var(--lg-body);line-height:1.65;color:var(--lg-text);margin:0 0 var(--lg-gap-p)}
#edWrap.mcflg .lgtext h2{font-size:calc(var(--lg-h2) * var(--lg-h2-mul));font-weight:600;line-height:1.25;margin:var(--lg-gap-h2) 0 12px;color:var(--lg-ink);scroll-margin-top:110px}
#edWrap.mcflg .lglist{padding:0 0 0 22px;list-style:disc}
#edWrap.mcflg .lglist li{margin:0 0 8px;padding:0}
#edWrap.mcflg .lgtext a{color:var(--lg-link);text-decoration:underline;text-underline-offset:2px;background:none}
#edWrap.mcflg .lgtext a:hover{color:var(--lg-ink)}
#edWrap.mcflg .lgtable{margin:8px 0 20px;overflow-x:auto;font-size:calc(var(--lg-table) * var(--lg-table-mul));line-height:1.45}
#edWrap.mcflg .lgtable table{width:100%;margin:0;border-collapse:collapse;border-spacing:0;background:transparent;font-size:inherit;line-height:inherit}
#edWrap.mcflg .lgtable th,#edWrap.mcflg .lgtable td{text-align:left;vertical-align:top;padding:10px 12px;line-height:1.5;color:var(--lg-text);background:transparent;border:1px solid rgba(128,128,128,.5);border-bottom-color:var(--lg-rule)}
#edWrap.mcflg .lgtable th{color:var(--lg-ink);font-weight:600;background:var(--lg-thbg)}
#edWrap.mcflg .lgtable tbody>tr:nth-child(odd)>td{background-color:rgba(128,128,128,.071)}
#edWrap.mcflg .lgtext>*:last-child{margin-bottom:0}

/* up to an iPad: the contents fold above the text, in two columns */
@container lg (max-width:1024px){
  #edWrap.mcflg .lghead{padding:48px 0 22px}
  #edWrap.mcflg .lgcols{grid-template-columns:1fr;row-gap:32px}
  #edWrap.mcflg .lgtoc{position:static}
  #edWrap.mcflg .lgtoc ol{columns:2;column-gap:28px;border-left:0}
  #edWrap.mcflg .lgtoc li{break-inside:avoid}
  #edWrap.mcflg .lgtoc a{border-left:2px solid var(--lg-rule);margin-left:0}
}
/* phones: one column of contents; each table row becomes a block of labelled lines (the label is the cell's data-h) */
@container lg (max-width:560px){
  #edWrap.mcflg .lgbody{padding:28px 0 64px}
  #edWrap.mcflg .lgtoc ol{columns:1}
  #edWrap.mcflg .lgtable th,#edWrap.mcflg .lgtable td{padding:8px}
  #edWrap.mcflg .lgtable{overflow:visible}
  #edWrap.mcflg .lgtable thead{display:none}
  #edWrap.mcflg .lgtable tr{display:block;padding:10px 0;border-bottom:1px solid var(--lg-rule)}
  #edWrap.mcflg .lgtable td{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:10px;padding:4px 0;border:0}
  #edWrap.mcflg .lgtable td::before{content:attr(data-h);font-weight:600;color:var(--lg-ink)}
}
