/* brutor-2026-frame.css - GENERATED by scripts/build-layers.py from brand2026/brutor-2026.css.
   LAYER 2, THE FRAME: the page, its edges, its grounds and its bands. Safe on ANY page:
   it styles the wrapper, never the content inside it. This layer is the flip.
   Do not edit here; edit the source and rebuild. */







:root{
  
  --page-max: none;
  --page-pad: 48px;
  --page-bg: #FFFFFF;       
  --margin-bg: #F3EFE7;      
  --margin-rule: none;

  
  --strap-h: 36px;   
  --header-h: 66px;  
  --section-y: 120px;        
  --section-y-tight: 64px;   
  --gutter: 24px;

  
  --ink-black:#131927;      
  --ink:#061635;        --ink-80:rgba(6,22,53,.8);  --ink-60:rgba(6,22,53,.6);  --ink-10:rgba(6,22,53,.1);
  --azure:#1BB5E8;      --azure-40:rgba(27,181,232,.4); --azure-10:rgba(27,181,232,.1);
  --orange:#FF6D00;     --orange-10:rgba(255,109,0,.1);
  --plum:#6E2A56;

  
  --ink-slate:#1C2B45;   --azure-ink:#0A5A78;   --sky:#7ADCF8;
  --orange-deep:#B84E00; --orange-tint:#FFE2CC;
  --plum-deep:#3D162F;   --plum-mid:#A84B82;    --mauve:#C79BB6;
  --bone:#FCFAF6;       --bone-deep:#F3EFE7;        --white:#fff;
  --grey:#4D5461;       --grey-100:#131927;         --grey-30:#E5E7EA;   
  --grey-80:#394050;                                         
  --navy-soft:#1D2C48;            
  --footer-bg:#000000;            
  --divider-dark:rgba(252,250,246,.15);   
  --menu-card:#E6E8EB;            
  --disabled-bg:#D2D5DB; --disabled-fg:#9EA2AE;     
  --disabled-bg-dark:#4D5461; --disabled-fg-dark:#6D717F;   
  
  --success:#43B75D; --danger:#EE443F; --warning:#FFAA00; --info:#0095FF;

  
  
  --sans:'Figtree',Inter,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  
  --shadow-azure: 6px 6px 0 var(--azure);
  --shadow-ink:   6px 6px 0 var(--ink);
  --shadow-w: 6px;           
  --line-w: 1px;             
  --radius: 6px;             
  --radius-box: 8px;         
  --grid-cols: 12;           
  --schematic-max: 1160px;   
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--margin-bg)}   /* frame layer: the page ground and nothing else. */




.page:not(body){position:relative;max-width:var(--page-max);margin:0 auto;background:var(--page-bg);border-left:var(--margin-rule);border-right:var(--margin-rule)}

.page:not(body)::before{content:"";position:absolute;top:0;bottom:0;left:var(--tex-inset);right:var(--tex-inset);
  background:url(assets/tex/grid-white.svg) 0 0/232px 153px repeat;opacity:.12;pointer-events:none;z-index:0}


.page:not(body)>*{position:relative;z-index:1}


.page:not(body)>header.hd,.page:not(body)>.strap{z-index:10}


:root{--edge-w:0px;--tex-inset:0px}

.page{--content-pad:calc(var(--page-pad) + var(--edge-w))}
   

.wrap{padding:0 calc(var(--content-pad) + var(--shadow-w)) 0 var(--content-pad)}
@media (max-width:760px){
:root{--page-pad:20px}
}




.page--framed{--page-max:1400px;--margin-rule:none}


.brutor-canvas .page{--page-max:1400px;--margin-rule:none}



.page--edges{--edge-w:80px;--tex-inset:var(--line-x);--page-max:1400px}


:root{--edge-line-w:1px;--edge-line-c:rgba(120,130,150,.5);--hole-r:6px;--hole-pitch:30px;
      --hole-x:20px;      
      --line-x:44px}
      

.page--edges>main{position:relative}

.page--edges>main::before,.page--edges>main::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--edge-w);z-index:3;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='30'%3E%3Ccircle cx='20' cy='15' r='6' fill='%23ECEAE6' fill-opacity='.55' stroke='%23788296' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg,var(--edge-line-c) 0 6px,transparent 6px 12px);
  background-size:var(--edge-w) var(--hole-pitch),var(--edge-line-w) 100%;
  background-repeat:repeat-y,no-repeat}

.page--edges main::before{left:0;background-position:left 0 top 0,left var(--line-x) top 0}

.page--edges main::after{right:0;transform:scaleX(-1);background-position:left 0 top 0,left var(--line-x) top 0}


.page--edges>main>.rule{margin:0 var(--edge-w)}
@media (max-width:900px){
.page--edges{--edge-w:0px;--tex-inset:0px}
.page--edges>main>*::after{display:none}
}


.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4,
.stats h1,.stats h2,.stats h3,.stats h4,
.card--navy h1,.card--navy h2,.card--navy h3,.card--navy h4,
footer.foot h1,footer.foot h2,footer.foot h3,footer.foot h4{color:var(--bone)}

.sec--titled .eyebrow:first-child{display:none}



.sec.sec--masthead{padding-top:56px}





.halo{--pull:52px;position:relative;padding:44px var(--pull) 48px;margin:-44px calc(var(--pull) * -1) 0}

.halo::before{content:"";position:absolute;inset:0;background:var(--white);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%),
    linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}

.halo > *{position:relative}
@media (max-width:900px){
.halo{--pull:var(--page-pad)}
}
@media (max-width:760px){
.halo{padding:28px var(--pull) 32px;margin:-28px calc(var(--pull) * -1) 0}
}



.type-halo{padding:34px 44px 30px;margin:-34px -44px 0;
  background:radial-gradient(115% 135% at 26% 46%,
    rgba(255,255,255,.98) 0 42%, rgba(255,255,255,.82) 60%, rgba(255,255,255,0) 78%)}
@media (max-width:760px){
.type-halo{padding:24px 20px;margin:-24px -20px 0}
}
     
.on-dark .n-idx,.on-dark .n-data{color:var(--azure)}

.on-dark .n-src{color:var(--bone)}

.on-dark .eyebrow{color:var(--azure)}

.on-dark .o,.bg-navy .o,.stats .o,.cta .o,footer.foot .o{color:var(--orange)}

.on-dark{color:var(--bone)}

.on-dark .u{text-decoration-color:var(--orange)}

.on-dark .h-rule::after,.bg-navy .h-rule::after{background:var(--orange)}

.on-dark .btn[disabled],.on-dark .btn--disabled{background:var(--disabled-bg-dark);color:var(--disabled-fg-dark);border-color:var(--disabled-fg-dark)}




.sec{padding:var(--section-y) 0}

.sec--tight{padding:var(--section-y-tight) 0}



.bg-grid,.bg-bone,.bg-lined,.bg-stripes,.bg-navy,.bg-navyline,.stats{position:relative}

.bg-grid>*,.bg-bone>*,.bg-lined>*,.bg-stripes>*,.bg-navy>*,.bg-navyline>*,.stats>*{position:relative}

.bg-grid{background:var(--white)}
   
.bg-grid::before{content:"";position:absolute;inset:0;background:url(assets/tex/grid-white.svg) 0 0/232px 153px repeat;opacity:.12;pointer-events:none}


.bg-bone{background:var(--white)}

.bg-bone::before{content:"";position:absolute;inset:0;background:url(assets/tex/fuzzy.png) 0 0/420px auto repeat;opacity:.5;pointer-events:none}




.bg-stripes{background:var(--white)}

.bg-stripes::before{content:"";position:absolute;inset:0;background:url(assets/tex/printer-stripes.png) center top/100% auto repeat-y;
  opacity:.35;mix-blend-mode:multiply;pointer-events:none}

.page--edges .bg-stripes::before{left:var(--tex-inset);right:var(--tex-inset)}

.bg-lined{background:var(--white)}

.bg-lined::before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;
  background:url(assets/tex/lined-paper.png) 0 0/651px auto repeat;
  mix-blend-mode:multiply;opacity:.65}


.page--edges .bg-lined::before{left:var(--tex-inset);right:var(--tex-inset)}


.page--edges .bg-grid::before,.page--edges .bg-bone::before{left:var(--tex-inset);right:var(--tex-inset)}



.bg-navy{background:var(--ink);color:var(--bone)}


.bg-navy::before,.bg-navyline::before,.stats::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(assets/tex/paper-dark.png) 0 0/900px auto repeat;opacity:.07;mix-blend-mode:screen}


.page--edges .bg-navy::before,.page--edges .bg-navyline::before,.page--edges .stats::before{left:var(--tex-inset);right:var(--tex-inset)}

.bg-navyline{background:var(--ink) repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);color:var(--bone)}
   

.rule{border:0;height:var(--edge-line-w);margin:0;background:repeating-linear-gradient(90deg,var(--edge-line-c) 0 6px,transparent 6px 12px)}

.rule--solid{background:var(--ink-black)}
   

.stats{background:var(--ink);color:var(--bone)}


.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;padding-top:44px;padding-bottom:44px}
@media (max-width:900px){
.stats .wrap{grid-template-columns:1fr;gap:28px}
}
@media (max-width:900px){
.stats .wrap{grid-template-columns:1fr}
}
                               
.on-dark .card,.bg-navy .card{box-shadow:var(--shadow-azure)}

.on-dark .ttag,.on-dark .btag,.card--navy .ttag,.card--navy .btag{color:var(--azure)}

.on-dark .blist li::before{background:var(--azure)}


.on-dark .input,.on-dark .select,.on-dark .textarea{background:var(--grey-80);border-color:var(--grey);color:var(--bone)}

.on-dark .input::placeholder,.on-dark .textarea::placeholder{color:var(--disabled-bg)}

.on-dark .field label{color:var(--bone)}

.on-dark .field .help{color:rgba(252,250,246,.6)}
   
.on-dark .pill,.bg-navy .pill{border-color:var(--bone);color:var(--bone)}

.on-dark .pill--azure,.bg-navy .pill--azure{border-color:var(--azure)}

.on-dark .pill--orange,.bg-navy .pill--orange{border-color:var(--orange)}

.on-dark .pill{background:transparent;border-color:var(--azure);color:var(--bone)}
        
.on-dark table.tbl th,.on-dark table.tbl td{border-color:var(--divider-dark);color:var(--bone)}

.on-dark .points li{color:var(--bone);border-bottom-color:var(--orange)}

.on-dark .cb-head .badge{background:var(--azure);color:var(--ink)}

.on-dark .cb-head .sub{color:var(--azure)}

.on-dark .cb-point{border-top-color:var(--divider-dark)}

.on-dark .cb-point p{color:rgba(252,250,246,.8)}

.on-dark .cb-media img{border-color:var(--azure);box-shadow:var(--shadow-azure)}

.on-dark .frame,.on-dark .illus,.on-dark .wptile,.on-dark .codebox,.on-dark .shot,.on-dark .fig img,.on-dark .qbox,.bg-navy .qbox,
.bg-navy .frame,.bg-navy .illus,.bg-navy .wptile,.bg-navy .codebox,.bg-navy .shot,.bg-navy .fig img{box-shadow:var(--shadow-azure);border-color:var(--azure)}

.on-dark table.tbl--ledger th,.on-dark table.tbl--ledger td{color:var(--bone)}

.halo .lead+.lead{margin-top:16px}



.stats--4 .wrap{grid-template-columns:repeat(4,1fr);gap:40px}

.stats--4 .stat{padding-left:28px}

.stats--4 .stat b{font-size:36px;line-height:44px}

.stats--4 .stat p{font-size:15px;line-height:24px}

.on-dark .cuts{color:rgba(252,250,246,.7);border-color:rgba(252,250,246,.35)}




:root{--t:.12s}
@media (prefers-reduced-motion:no-preference){

    .sec .head,.sec .cards,.sec .rows,.sec .note,.sec .figure,.sec .two,.sec .diff,.sec .list3,
    .sec .qbox,.sec .frames,.stats .stat,.cta .wrap>*{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
html body .page--edges main [class*="-band"],
html body .page--edges main [class*="-section"],
html body .page--edges main .pp-hub-bracket,
html body .page--edges main [class*="alignfull"],
html body .page--edges main [style*="100vw"]{
  width:auto !important;max-width:100% !important;
  margin-left:0 !important;margin-right:0 !important;left:auto !important;right:auto !important}
html body:not(.brutor-canvas) .page--edges > main{
  padding-left:var(--edge-w);padding-right:var(--edge-w);box-sizing:border-box}
html body{background:var(--margin-bg) !important}
html body .page.page--edges{position:relative}
html body .page.page--edges>main{position:relative}
html body .page.page--edges>main::before,html body .page.page--edges>main::after{display:block}