/* built from style.css — do not edit here, edit style.css */
:root{
  --carbon:var(--carbontex);
  --metal:var(--barmetal);
  --bolt:var(--bolttex);
  --red-1:#FF1A1A; --red-2:#FF4D1A; --red-3:#FF8A1A; --red-4:#FFA733;
  --ink:#E8E8E8; --ink-dim:#A6A6A6; --ink-faint:#7A7A7A;
  --plate-1:#4A4A4A; --plate-2:#333; --plate-3:#242424;
  --edge:#5A5A5A; --hair:rgba(255,255,255,.09);
  --shell:#0C0C0C;
  --wrap:1180px;
  --display:'Arial Narrow','Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--shell) var(--carbon) repeat;background-size:450px auto;
  color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;
}
a{color:var(--red-3);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--red-4);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#000;padding:10px 16px;border:2px solid var(--red-3)}

/* ---- header: the product's own bar, carried over ---- */
.bar{position:sticky;top:0;z-index:50;background:#2E2E2E var(--metal) repeat-x;
  background-size:auto 100%;border-bottom:1px solid #000;
  box-shadow:0 6px 22px rgba(0,0,0,.6)}
.bar::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--red-1),var(--red-2) 32%,var(--red-3) 66%,var(--red-4))}
.lock{display:flex;align-items:center;gap:13px;padding:10px 26px;max-width:var(--wrap);margin:0 auto}
.homelink{display:flex;flex:0 0 auto;line-height:0;text-decoration:none}
.badge{width:70px;height:70px;flex:0 0 70px;object-fit:contain}
.badge[src=""],.badge:not([src]){display:none}
.mark{font-family:var(--display);font-weight:700;font-size:32px;line-height:.95;
  font-stretch:semi-condensed;letter-spacing:.008em;text-transform:uppercase;margin:0;
  background:linear-gradient(90deg,var(--red-1),var(--red-2) 38%,var(--red-3) 72%,var(--red-4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.mark sup{font-size:.42em;vertical-align:super;-webkit-text-fill-color:var(--red-4)}
.desc{font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.135em;
  text-transform:uppercase;color:#BFBFBF;margin:3px 0 0;white-space:nowrap}
.legal{font-size:10.5px;letter-spacing:.03em;color:#AFAFAF;margin:1px 0 0}
nav.menu{margin-left:auto;display:flex;flex-wrap:wrap;gap:7px}
nav.menu a{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#DCDCDC;padding:8px 11px;white-space:nowrap;border:1px solid
  #565656;
  border-radius:3px;background:linear-gradient(#4C4C4C,#333);text-decoration:none}
nav.menu a:hover{color:#fff;border-color:var(--red-3);text-decoration:none}

/* ---- the signature: a bolted equipment plate ---- */
.plate{position:relative;border-radius:6px;padding:56px 60px;
  background:linear-gradient(158deg,var(--plate-1),var(--plate-2) 52%,var(--plate-3));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 60px rgba(0,0,0,.66)}
.plate::before,.plate::after,.plate>.b1,.plate>.b2{content:"";position:absolute;width:30px;height:30px;
  background:var(--bolt) no-repeat center/contain;pointer-events:none}
.plate::before{top:15px;left:15px} .plate::after{top:15px;right:15px}
.plate>.b1{bottom:15px;left:15px} .plate>.b2{bottom:15px;right:15px}

/* ---- sections ---- */
section{padding:76px 0}
section.tint{background:rgba(0,0,0,.42)}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red-3);margin:0 0 12px}
h2{font-family:var(--display);font-weight:700;font-stretch:semi-condensed;font-size:clamp(31px,4.4vw,50px);line-height:1.02;
  letter-spacing:.005em;margin:0 0 20px}
h3{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;
  margin:0 0 9px;color:#fff}
p{margin:0 0 17px;max-width:70ch}
.lede{font-size:19.5px;color:#D6D6D6}
.dim{color:var(--ink-dim)}
.note{margin:34px 0 0;padding:22px 26px;max-width:76ch;border-left:2px solid #4A4A4A;
  background:rgba(0,0,0,.3);color:#C4C4C4;font-size:17px}

/* ---- hero: photo owns the left of the screen, carbon the right,
        the bolted plate sits over both with the message on it ---- */
.hero{padding:74px 0 66px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;left:0;bottom:0;width:46%;
  background-image:linear-gradient(100deg,rgba(8,8,8,.30) 0%,rgba(8,8,8,.55) 55%,
                   rgba(12,12,12,.92) 97%),var(--heroimg);
  background-size:cover,cover;background-position:center,32% center;
  background-repeat:no-repeat,no-repeat;pointer-events:none;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 62%,transparent 99%);
  mask-image:linear-gradient(100deg,#000 0%,#000 62%,transparent 99%)}
.hero > .wrap{position:relative;z-index:1}
.hero .plate{max-width:760px;margin-left:auto}
@media (max-width:1100px){
  .hero::before{width:100%;opacity:.32;background-position:center,center}
  .hero .plate{max-width:none;margin-left:0}
}
.hero h1{font-family:var(--display);font-weight:700;font-stretch:semi-condensed;font-size:clamp(40px,6.6vw,78px);
  line-height:1;letter-spacing:.004em;margin:0 0 22px;color:#fff}
.hero h1{font-size:clamp(36px,3.9vw,55px)}
.hero h1 em{font-style:normal;
  background:linear-gradient(90deg,var(--red-1),var(--red-3) 70%,var(--red-4));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:20px;color:#D8D8D8;max-width:60ch}
.jump-lead{margin:30px 0 13px;font-size:15px;letter-spacing:.03em;color:var(--ink-dim)}
.jump{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.jtile{display:block;padding:18px 20px;border-radius:5px;text-decoration:none;
  background:linear-gradient(160deg,#242424,#1A1A1A);border:1px solid #454545;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);border-left:3px solid var(--red-2)}
.jtile:hover{background:linear-gradient(160deg,#3A3A3A,#272727);border-left-color:var(--red-4);
  text-decoration:none}
.jname{display:block;font-family:var(--display);font-weight:700;font-stretch:semi-condensed;
  font-size:19px;line-height:1.2;letter-spacing:.02em;color:#fff}
.jdesc{display:block;margin-top:3px;font-size:15px;color:var(--ink-dim)}
.jtile:hover .jdesc{color:#CFCFCF}
.what{font-size:20.5px;line-height:1.55;color:#EDEDED;max-width:62ch;margin:0 0 22px}
.scene{display:grid;gap:26px;align-items:center;margin:0 0 4px;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.scene p{margin:0;max-width:34ch}
.shot{margin:0;padding:0}
.shot img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid #3A3A3A}
@media (max-width:900px){.scene{grid-template-columns:1fr;gap:20px}.scene p{max-width:70ch}}
.hook{font-size:19px;color:#E4E4E4;border-left:2px solid var(--red-2);padding-left:20px;
  margin:24px 0 0;max-width:58ch}
.tag{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red-3);margin:26px 0 0}
.btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}
.btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.11em;text-transform:uppercase;padding:15px 30px;border-radius:4px;
  border:1px solid #7E1010;background:linear-gradient(#E02020,#A81212);color:#fff;
  text-decoration:none;box-shadow:0 3px 0 #6E0C0C,0 10px 24px rgba(0,0,0,.45)}
.btn:hover{background:linear-gradient(#F03030,#BC1616);text-decoration:none;color:#fff}
.btn.ghost{background:linear-gradient(#4A4A4A,#303030);border-color:#606060;
  box-shadow:0 3px 0 #1E1E1E,0 10px 24px rgba(0,0,0,.4)}
.btn.ghost:hover{background:linear-gradient(#585858,#3A3A3A)}

/* ---- grids ---- */
.grid{display:grid;gap:22px;margin-top:34px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.card{background:linear-gradient(160deg,#2B2B2B,#1D1D1D);border:1px solid #3E3E3E;
  border-radius:5px;padding:28px 26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.card p:last-child{margin-bottom:0}
.card .rule{width:46px;height:3px;margin-bottom:15px;border-radius:2px;
  background:linear-gradient(90deg,var(--red-1),var(--red-4))}

/* ---- product cards ---- */
.buy{display:flex;flex-direction:column;height:100%}
.buy .who{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red-3);margin:0 0 12px;min-height:2.6em;
  display:flex;align-items:flex-end}
.buy h3{margin:0 0 5px}
.buy .line{font-size:15px;color:var(--ink-dim);margin:0 0 18px;letter-spacing:.01em;
  line-height:1.45}
.buy ul{list-style:none;padding:0;margin:0 0 22px;font-size:16px;color:var(--ink-dim)}
.buy li{padding:6px 0 6px 20px;position:relative}
.buy li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;
  background:var(--red-3)}
.buy .btn{margin-top:auto;text-align:center}

/* ---- the spec plate: labels and plain values, like an equipment tag ---- */
.spec{margin:34px 0 0;border-top:1px solid #383838;max-width:62rem}
.row{display:grid;grid-template-columns:15rem 1fr;gap:26px;
  padding:22px 2px;border-bottom:1px solid #2C2C2C}
.row dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#9C9C9C;margin:3px 0 0}
.row dd{margin:0;color:var(--ink)}
.row dd .why{display:block;margin-top:7px;color:#B0B0B0;font-size:15.5px;line-height:1.6}
@media (max-width:700px){.row{grid-template-columns:1fr;gap:6px}}

/* ---- footer ---- */
footer{background:rgba(0,0,0,.62);border-top:1px solid #2A2A2A;padding:52px 0 34px;
  font-size:15.5px;color:var(--ink-dim)}
footer h3.foot-h{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.19em;
  text-transform:uppercase;color:#C8C8C8;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:4px 0}
.foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.colophon{margin-top:38px;padding-top:20px;border-top:1px solid #262626;
  font-size:13.5px;color:var(--ink-faint)}

@media (max-width:820px){
  .bar{position:static}
  .legal{display:none}
  .desc{white-space:normal;font-size:10.5px;letter-spacing:.1em}
  .mark{font-size:26px}
  .lock{flex-wrap:wrap;gap:9px;padding:10px 20px}
  nav.menu{margin-left:0;width:100%;gap:6px}
  nav.menu a{font-size:12.5px;padding:7px 10px}
  .plate{padding:38px 24px}
  section{padding:52px 0}
  html{scroll-padding-top:20px}
  .buy .who{min-height:0}
}

/* ---- product pages ---- */
.crumb{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px}
.crumb a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid #444}
.crumb a:hover{color:#fff;border-bottom-color:var(--red-3);text-decoration:none}
.ptitle{font-family:var(--display);font-weight:700;font-stretch:semi-condensed;
  font-size:clamp(34px,4.2vw,52px);line-height:1.02;margin:0 0 8px;color:#fff}
.psub{font-size:17px;color:var(--ink-dim);margin:0 0 22px;letter-spacing:.01em}
.spec{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
  margin:34px 0 0}
.fig{background:linear-gradient(160deg,#252525,#191919);border:1px solid #3E3E3E;
  border-left:3px solid var(--red-2);border-radius:5px;padding:18px 20px}
.fig b{display:block;font-family:var(--display);font-weight:700;font-stretch:semi-condensed;
  font-size:30px;line-height:1;color:#fff;letter-spacing:.01em}
.fig span{display:block;margin-top:6px;font-size:15px;color:var(--ink-dim);line-height:1.45}
.rows{margin:34px 0 0;border-top:1px solid #363636;max-width:74ch}
.rows .r{display:grid;grid-template-columns:13rem 1fr;gap:24px;padding:20px 2px;
  border-bottom:1px solid #2B2B2B}
.rows dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;color:#9E9E9E;margin:3px 0 0}
.rows dd{margin:0;color:var(--ink)}
@media (max-width:700px){.rows .r{grid-template-columns:1fr;gap:6px}}
.backbar{padding:44px 0 76px}
.more{margin:12px 0 0;text-align:center;font-size:15px}
.more a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid #4A4A4A}
.more a:hover{color:#fff;border-bottom-color:var(--red-3);text-decoration:none}

:root{--heroimg:none;--carbontex:none;
  /* the design's own pictures, wired here so every page gets them. Sep 1 2026. */
  --barmetal:url('img/bar-metal.jpg');
  --platetex:url('img/plate-texture-dark.jpg');
  --btntex:url('img/button-texture.jpg');
  --leathertile:url('img/leather.jpg');
  --bolttex:url('img/bolt-texture.png');
  /* Oct 28 2026: the weave now points at carbon-p.jpg, not carbon.jpg.
     WHY: the original weave shimmered while the page scrolled, on a 100% display,
     drawn pixel for pixel at its native 885x855. Proved by swapping the leather
     texture onto the same band, which did not shimmer. The weave repeats every
     30px across and 22px down and swings 31.3 light-to-dark; the leather has no
     repeat and swings 19.8. A strict repeating grid redrawn at sub-pixel offsets
     beats against itself and travels. carbon-p.jpg is the same picture with the
     weave's swing pulled to 18.1 and the overall depth untouched. Confirmed clean
     by eye on Oct 28. DO NOT POINT THESE BACK AT carbon.jpg — the originals are
     kept beside them only as the source. Making the weave BIGGER was tried and
     rejected: it reduced the shimmer but lost the texture. */
  --carbonband:url('img/carbon-p.jpg');
  --carbonband-r:url('img/carbon-mirrored-p.jpg');
  --panel-green:#15231F;--edge-green:#225137;--text-green:#44D776;
  --panel-blue:#161D27;--edge-blue:#293F5C;--text-blue:#5A99DE;}
/* 400px tile: small enough that pure grain has no structure to read as a repeat */
body{background:#0C0C0C var(--leathertile) repeat !important;background-size:1920px 896px !important}
section.tint{background:transparent !important}
.lock{max-width:1620px !important}
/* Sept 20: these three were written with no width limit and beat the narrow-screen
   header rules in the 820px block above, which had been correct all along and never
   got to run. Bounded now. DO NOT REMOVE THE WIDTH LIMITS: without them the header
   grows past 400px on a phone and the four buttons stack in a column at 900px.
   These limits must NOT touch anything outside the header bar. */
@media (min-width:1101px){
  nav.menu{margin-left:auto !important;flex:0 1 760px !important;width:760px !important;justify-content:center !important}
}
@media (min-width:821px) and (max-width:1100px){
  nav.menu{margin-left:auto !important;justify-content:flex-end !important}
}
@media (min-width:821px){
  .badge{width:96px !important;height:96px !important;flex:0 0 96px !important}
  .mark{font-size:42px !important} .desc{font-size:13.5px !important}
}
body:not(.has-hero) .hero::before{display:none !important;width:100% !important;
  background-image:linear-gradient(100deg,rgba(8,8,8,.14) 0%,rgba(8,8,8,.14) 100%),var(--heroimg) !important;
  background-position:left top,left top !important;
  background-size:100% auto,57.5% auto !important;background-repeat:no-repeat,no-repeat !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 97%,transparent 100%) !important;
  mask-image:linear-gradient(to bottom,#000 0%,#000 97%,transparent 100%) !important}
.hero > .wrap{max-width:1620px !important}
.hero .plate{background-image:linear-gradient(158deg,rgba(96,96,96,.30),rgba(40,40,40,.30) 52%,rgba(24,24,24,.42)),var(--platetex) !important;
  background-size:auto,420px auto !important;background-repeat:no-repeat,repeat !important;
  border:1px solid #3A3A3A !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.72),inset 0 9px 18px -7px rgba(0,0,0,.80),inset 7px 0 16px -9px rgba(0,0,0,.55),inset 0 -3px 0 rgba(255,255,255,.14),inset -3px 0 0 rgba(255,255,255,.07),0 -2px 3px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.10),0 5px 12px rgba(0,0,0,.42) !important}
/* no min-height: the section is as tall as its content, so there is no dead space to fill */
section.band{position:relative;overflow:hidden;padding:104px 0 !important}
/* the carbon is confined to a narrow band on its own side, at its native pixel size */
.carbon{position:absolute;top:0;bottom:0;left:0;width:38%;z-index:0;
  background:var(--carbonband) repeat left top;background-size:885px 855px;
  /* Oct 26: will-change:transform was removed here. Nothing on this band ever moves,
     so it was asking the browser to hold a permanent compositor layer for an animation
     that never comes — and this band also carries a mask, which has to be re-rasterised
     every time the layer is rebuilt. With 32 such elements on a page the browser runs
     out of layer budget, drops some and re-promotes them mid-scroll, which is what
     reads as flicker. translateZ(0) stays: that is what keeps it composited. */
  transform:translateZ(0);backface-visibility:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 24%,transparent 94%);
  mask-image:linear-gradient(to right,#000 0%,#000 24%,transparent 94%)}
.carbon::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;
  background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,0) 100%)}
section.art-right .carbon{left:auto;right:0;background-image:var(--carbonband-r);background-position:right top;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 24%,transparent 94%);
  mask-image:linear-gradient(to left,#000 0%,#000 24%,transparent 94%)}
section.art-right .carbon::after{left:0;right:0;background:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,0) 100%)}
.deck{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Oct 26: will-change removed for the same reason. Each card already carries its own
   rotate and translateZ, which composites it. There are up to 27 of these on one page. */
.deck img{position:absolute;display:block;border-radius:3px;backface-visibility:hidden;
  box-shadow:0 24px 52px rgba(0,0,0,.72),0 6px 14px rgba(0,0,0,.5)}
.deck .c0{width:33.1vw;left:14.1vw;top:-40px;transform:rotate(7deg) translateZ(0)}
section.art-right .deck .c0{left:auto;right:14.1vw;transform:rotate(-7deg) translateZ(0)}
.deck .c1{width:34.6vw;left:7.5vw;top:235px;transform:rotate(3deg) translateZ(0)}
section.art-right .deck .c1{left:auto;right:7.5vw;transform:rotate(-3deg) translateZ(0)}
.deck .c2{width:36.5vw;left:1.8vw;top:545px;transform:rotate(-2deg) translateZ(0)}
section.art-right .deck .c2{left:auto;right:1.8vw;transform:rotate(2deg) translateZ(0)}
.deck .c3{width:38.1vw;left:-0.5vw;top:880px;transform:rotate(-5deg) translateZ(0)}
section.art-right .deck .c3{left:auto;right:-0.5vw;transform:rotate(5deg) translateZ(0)}
.deck .c4{width:36.5vw;left:3.0vw;top:1215px;transform:rotate(4deg) translateZ(0)}
section.art-right .deck .c4{left:auto;right:3.0vw;transform:rotate(-4deg) translateZ(0)}
.deck .c5{width:34.6vw;left:8.5vw;top:1545px;transform:rotate(-3deg) translateZ(0)}
section.art-right .deck .c5{left:auto;right:8.5vw;transform:rotate(3deg) translateZ(0)}
  .hero .deck .c0{top:-40px}
  .hero .deck .c1{top:150px}
  .hero .deck .c2{top:340px}
  .hero .deck .c3{top:530px}

section.band::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--red-1),var(--red-2) 30%,var(--red-3) 62%,var(--red-4) 82%,transparent)}
section#runs.band{border-bottom:3px solid transparent;
  border-image:linear-gradient(90deg,var(--red-1),var(--red-2) 30%,var(--red-3) 62%,var(--red-4) 82%,transparent) 1}
section.band > .wrap{max-width:1620px !important;position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
section.art-right .col-text{grid-column:1} section.art-left .col-text{grid-column:2}
/* what it runs on: everything shifted right, the mark cut into the leather on the left */
section.nocarbon > .wrap{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
section.nocarbon .col-text{grid-column:2}
.monkeymark{position:absolute;left:5.5vw;top:50%;transform:translateY(-50%);width:24vw;max-width:430px;
  z-index:1;opacity:1;
  filter:drop-shadow(0 -3px 5px rgba(0,0,0,.95)) drop-shadow(0 3px 0 rgba(255,255,255,.12)) drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.lockmark{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:132px;height:132px;
  border-radius:5px;opacity:.92;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
section.band .rows,section.band .spec{max-width:none !important}
section.band p{max-width:64ch !important}
.sec-plate{position:relative;border-radius:7px;padding:30px 40px 26px;margin:0 0 28px;max-width:790px;
  background-image:linear-gradient(158deg,rgba(96,96,96,.30),rgba(40,40,40,.30) 52%,rgba(24,24,24,.42)),var(--platetex);
  background-size:auto,420px auto;background-repeat:no-repeat,repeat;border:1px solid #6E6E6E;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),inset 0 4px 0 rgba(255,255,255,.30),inset 4px 0 0 rgba(255,255,255,.10),inset 0 -4px 0 rgba(0,0,0,.60),inset -4px 0 0 rgba(0,0,0,.42),inset 0 11px 14px -11px rgba(255,255,255,.26),inset 0 -11px 14px -11px rgba(0,0,0,.52),0 20px 50px rgba(0,0,0,.62)}
section.nocarbon .sec-plate{padding-right:210px;max-width:none}
.sec-plate::before,.sec-plate::after,.sec-plate>.b1,.sec-plate>.b2{content:"";position:absolute;
  width:28px;height:28px;background:var(--bolttex) no-repeat center/contain;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.85))}
.sec-plate::before{top:13px;left:13px} .sec-plate::after{top:13px;right:13px}
.sec-plate>.b1{bottom:13px;left:13px} .sec-plate>.b2{bottom:13px;right:13px}
.sec-plate .eyebrow{margin:0 0 9px} .sec-plate h2{margin:0;font-size:clamp(31px,2.7vw,45px)}
.lede.accent{background:var(--panel-green);border-left:3px solid var(--edge-green);
  padding:18px 22px;border-radius:0 4px 4px 0;color:#DCE8E1 !important;max-width:62ch !important}
.brandname{background:linear-gradient(90deg,var(--red-1),var(--red-2) 40%,var(--red-3) 75%,var(--red-4));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.hook,.panel-g{background:var(--panel-green) !important;border-left:3px solid var(--edge-green) !important;
  padding:18px 22px !important;border-radius:0 4px 4px 0 !important;color:#DCE8E1 !important;text-align:left !important}
.note,.panel-b{background:var(--panel-blue) !important;border-left:3px solid var(--edge-blue) !important;
  padding:18px 22px !important;border-radius:0 4px 4px 0 !important;color:#D2DCE8 !important;text-align:left !important}
.panel-b.more a{color:var(--text-blue) !important;border-bottom-color:var(--edge-blue) !important}
.lead-g{color:var(--text-green);font-weight:700} .lead-b{color:var(--text-blue);font-weight:700}
.rows dt{color:var(--red-3) !important}
.rows .r{border-bottom:1px solid rgba(255,255,255,.09) !important}
/* the numbered tiles, backlit the way the product's are */
.fig{background:linear-gradient(180deg,rgba(84,84,88,.58),rgba(24,24,26,.88)) !important;
  border:1px solid #7A7A7E !important;border-radius:9px !important;padding:20px 22px !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.62),
    inset 0 0 26px rgba(255,138,26,.16),0 0 20px rgba(255,120,40,.14),
    0 6px 14px rgba(0,0,0,.55) !important}
.fig b{color:#fff !important;text-shadow:0 0 14px rgba(255,150,60,.42)}
nav.menu a,.btn{transition:box-shadow .16s ease,transform .10s ease}
nav.menu a{border-radius:8px !important;font-size:14.5px !important;padding:8px 16px !important;
  letter-spacing:.05em !important;color:#EEF0F3 !important;border:1px solid #0E0E0E !important;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 86%,rgba(0,0,0,.35) 100%),#3D3E3F var(--btntex) repeat !important;background-size:auto,280px auto !important;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 8px rgba(0,0,0,.45) !important}
.btn{text-transform:none !important;letter-spacing:.01em !important;font-size:19px !important;border-radius:10px !important;
  padding:13px 26px !important;color:#fff !important;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 86%,rgba(0,0,0,.35) 100%),linear-gradient(#E02015,#C2160E) !important;
  border:1px solid #0E0E0E !important;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 3px 8px rgba(0,0,0,.45) !important}
/* Sept 20: the button rule above carries no width limit, so the smaller sizing in the
   820px block never ran. Restored here. MUST NOT change colour, border or shadow —
   size only, or the buttons stop matching the rest of the metal. */
@media (max-width:820px){
  nav.menu a{font-size:12.5px !important;padding:7px 10px !important}
}
/* Sept 20: between 821 and 1000 the tagline is locked to one line and leaves the button
   bar about 200px, so four 198px buttons stacked in a column. Drop the bar to its own
   row through that band. MUST NOT extend past 1100 — above it the bar sits beside the
   wordmark and costs no extra height at all. */
@media (min-width:821px) and (max-width:1100px){
  .lock{flex-wrap:wrap !important}
  nav.menu{margin-left:0 !important;width:100% !important;justify-content:flex-start !important}
}
/* Sept 22: the three buy buttons are inert until a checkout exists. This keeps the page
   shape but makes plain it cannot be clicked. MUST NOT be reused for a live button, and it
   comes out the day the real checkout links go in. */
.btn-soon{cursor:default !important;opacity:.62 !important;filter:saturate(.35) !important;
  box-shadow:none !important;transform:none !important}
.btn-soon:hover{box-shadow:none !important;transform:none !important}
nav.menu a:hover,.btn:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.34),0 0 0 1px rgba(255,138,26,.55),0 0 22px rgba(255,77,26,.50),0 4px 12px rgba(0,0,0,.55) !important;color:#fff !important;text-decoration:none}
nav.menu a:active,.btn:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.65),0 0 0 1px rgba(255,138,26,.75),0 0 26px rgba(255,77,26,.65),0 1px 3px rgba(0,0,0,.6) !important;transform:translateY(1px)}
nav.menu a:focus-visible,.btn:focus-visible{box-shadow:inset 0 2px 0 rgba(255,255,255,.34),0 0 0 1px rgba(255,138,26,.55),0 0 22px rgba(255,77,26,.50),0 4px 12px rgba(0,0,0,.55) !important;outline:none}
@media (max-width:1100px){section.band > .wrap,section.nocarbon > .wrap{grid-template-columns:1fr}
  section.art-right .col-text,section.art-left .col-text,section.nocarbon .col-text{grid-column:1}
  .deck{display:none} .carbon{width:100%;opacity:.4} .monkeymark{display:none}
  .lockmark{position:static;transform:none;display:block;margin:16px 0 0}
  section.nocarbon .sec-plate{padding-right:40px}}


  /* ---- glass panels: shadow does the depth, the glow only accents ---- */
  .hook,.panel-g,.lede.accent,.note,.panel-b,.card,.fig{
    position:relative;isolation:isolate;
    border-radius:10px !important;
    -webkit-backdrop-filter:blur(11px) brightness(.46) saturate(1.08);
    backdrop-filter:blur(11px) brightness(.46) saturate(1.08);
    border-top:1px solid rgba(198,208,220,.50) !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
    border-bottom:1px solid rgba(0,0,0,.72) !important;
    transform:translateZ(0);
  }
  .hook::before,.panel-g::before,.lede.accent::before,.note::before,
  .panel-b::before,.card::before,.fig::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.055) 29%,transparent 39%);
  }
  .hook::after,.panel-g::after,.lede.accent::after,.note::after,
  .panel-b::after,.card::after,.fig::after{
    content:"";position:absolute;left:4px;right:4px;bottom:-9px;height:9px;
    border-radius:0 0 9px 9px;pointer-events:none;z-index:-1;
    background:linear-gradient(180deg,rgba(150,162,176,.50),rgba(60,68,78,0));
  }
  /* the glow takes each box's own colour */
  .hook,.panel-g,.lede.accent{
    background:linear-gradient(180deg,rgba(24,42,35,.60),rgba(12,22,19,.76)) !important;
    box-shadow:0 14px 18px -6px rgba(0,0,0,.66),0 52px 46px -20px rgba(0,0,0,.58),
      0 0 18px rgba(52,160,110,.30),0 0 38px rgba(52,160,110,.15),0 0 64px rgba(52,160,110,.07),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
  .note,.panel-b{
    background:linear-gradient(180deg,rgba(24,34,48,.60),rgba(12,18,26,.76)) !important;
    box-shadow:0 14px 18px -6px rgba(0,0,0,.66),0 52px 46px -20px rgba(0,0,0,.58),
      0 0 18px rgba(64,124,196,.30),0 0 38px rgba(64,124,196,.15),0 0 64px rgba(64,124,196,.07),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
  .fig,.jtile{
    background:linear-gradient(180deg,rgba(40,30,26,.60),rgba(20,15,13,.76)) !important;
    box-shadow:0 14px 18px -6px rgba(0,0,0,.66),0 52px 46px -20px rgba(0,0,0,.58),
      0 0 18px rgba(255,77,26,.26),0 0 38px rgba(255,77,26,.13),0 0 64px rgba(255,77,26,.06),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
  .card{
    background:linear-gradient(180deg,rgba(34,38,44,.58),rgba(16,19,24,.76)) !important;
    box-shadow:0 14px 18px -6px rgba(0,0,0,.66),0 52px 46px -20px rgba(0,0,0,.58),
      0 0 18px rgba(150,164,180,.22),0 0 38px rgba(150,164,180,.11),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}

  /* ---- the bolted plate: bolts cut out over one tiling face ---- */
  .plate,.hero .plate{
    background:
      url('img/bolt-top-left.png') no-repeat left 14px top 12px,
      url('img/bolt-top-right.png') no-repeat right 14px top 12px,
      url('img/bolt-bottom-left.png') no-repeat left 14px bottom 12px,
      url('img/bolt-bottom-right.png') no-repeat right 14px bottom 12px,
      linear-gradient(100deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%),
      url('img/plate-face-hero.jpg') no-repeat left top !important;
    background-size:auto,auto,auto,auto,100% 100%,cover !important;
    border:none !important;border-radius:3px !important;
    padding:74px 78px 70px !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(0,0,0,.45),0 16px 22px -8px rgba(0,0,0,.72),
      0 54px 48px -22px rgba(0,0,0,.60) !important}
  .plate::before,.plate::after,.plate .b1,.plate .b2,.hero .plate::before,.hero .plate::after{display:none !important}
  .plate h1,.plate h2,.hero .plate h1,.hero .plate h2{
    background:linear-gradient(100deg,#FF1A1A 0%,#FF4D1A 46%,#FF8A1A 100%) !important;
    -webkit-background-clip:text !important;background-clip:text !important;color:transparent !important;
    filter:drop-shadow(0 -2px 1px rgba(0,0,0,.90)) drop-shadow(0 2px 0 rgba(255,255,255,.45))
           drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important}
  .plate .crumb,.plate .eyebrow,.plate .kicker,.plate .crumb a,.plate .crumb span,.hero .plate .crumb,.hero .plate .eyebrow{
    color:#232323 !important;text-shadow:0 1px 0 rgba(255,255,255,.45) !important}
  .plate p,.plate li,.plate .sub,.hero .plate p,.hero .plate li,.hero .plate .sub{color:#000000 !important;text-shadow:0 1px 0 rgba(255,255,255,.30) !important}
  /* A glass panel sitting on a plate keeps its own light text.
     .plate p is a class plus an element, so it outranks .hook on its own.
     Equal importance, higher specificity, later in the file. Added Aug 31 2026. */
  .plate p.hook,.plate p.panel-g,.plate p.panel-b,.plate p.note,.plate p.lede,
  .hero .plate p.hook,.hero .plate p.panel-g,.hero .plate p.panel-b,
  .hero .plate p.note,.hero .plate p.lede{
    color:#DCE8E1 !important;text-shadow:0 1px 2px rgba(0,0,0,.55) !important}

  /* ---- the section plates are the hero plate, only shorter. Added Aug 31 2026. ---- */
  .sec-plate{
    max-width:none;margin-left:-28px;margin-right:-28px;
    padding:52px 62px 46px;
    border:none;border-radius:3px;
    background:
      url('img/bolt-top-left.png') no-repeat left 14px top 12px,
      url('img/bolt-top-right.png') no-repeat right 14px top 12px,
      url('img/bolt-bottom-left.png') no-repeat left 14px bottom 12px,
      url('img/bolt-bottom-right.png') no-repeat right 14px bottom 12px,
      url('img/plate-face-section.jpg') no-repeat left top #9A9A9A;
    background-size:auto,auto,auto,auto,auto;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(0,0,0,.45),0 16px 22px -8px rgba(0,0,0,.72),
      0 54px 48px -22px rgba(0,0,0,.60)}
  section.nocarbon .sec-plate{margin-left:0;margin-right:0;padding-right:210px}
  .sec-plate::before,.sec-plate::after,.sec-plate>.b1,.sec-plate>.b2{display:none !important}
  .sec-plate h1,.sec-plate h2,.sec-plate h3{
    background:linear-gradient(100deg,#FF1A1A 0%,#FF4D1A 46%,#FF8A1A 100%) !important;
    -webkit-background-clip:text !important;background-clip:text !important;
    color:transparent !important;
    filter:drop-shadow(0 -2px 1px rgba(0,0,0,.90)) drop-shadow(0 2px 0 rgba(255,255,255,.45))
           drop-shadow(0 3px 3px rgba(0,0,0,.35)) !important}
  .sec-plate .eyebrow,.sec-plate .crumb,.sec-plate .kicker{
    color:#232323 !important;text-shadow:0 1px 0 rgba(255,255,255,.45) !important}
  .sec-plate p,.sec-plate li,.sec-plate .sub{
    color:#000000 !important;text-shadow:0 1px 0 rgba(255,255,255,.30) !important}

  /* ---- Aug 31 evening: five touch-ups, one block ---- */

  /* 1. the lock sits clear of the bolts and centred in its own space */
  section.nocarbon .sec-plate{padding-right:210px}
  .lockmark{right:130px}

  /* 2. every glass piece gets a deeper contact shadow so it reads as hovering.
        Shadow says how far off the surface it sits; the glow only says where it is. */
  .hook,.panel-g,.lede.accent{
    box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),0 3px 6px rgba(0,0,0,.55),
      0 0 18px rgba(52,160,110,.30),0 0 38px rgba(52,160,110,.15),0 0 64px rgba(52,160,110,.07),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
  .note,.panel-b{
    box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),0 3px 6px rgba(0,0,0,.55),
      0 0 18px rgba(64,124,196,.30),0 0 38px rgba(64,124,196,.15),0 0 64px rgba(64,124,196,.07),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
  .card{
    box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),0 3px 6px rgba(0,0,0,.55),
      0 0 18px rgba(150,164,180,.22),0 0 38px rgba(150,164,180,.11),
      inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}

  /* 3. the three numbered tiles light up like marker lamps: amber, red, green */
  /* all three amber, sitting in a row like the marker lamps across a cab roof */
  .spec .fig{--marker:255,176,32}
  .spec .fig{
    background:linear-gradient(180deg,rgba(38,38,42,.62),rgba(15,15,18,.82)) !important;
    border:1px solid rgba(var(--marker),.45) !important;
    box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),0 3px 6px rgba(0,0,0,.55),
      0 0 24px rgba(var(--marker),.55),0 0 50px rgba(var(--marker),.30),
      0 0 86px rgba(var(--marker),.15),inset 0 0 30px rgba(var(--marker),.20),
      inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 0 rgba(0,0,0,.50) !important}
  .spec .fig b{color:#FFFFFF !important;
    text-shadow:0 0 10px rgba(var(--marker),.90),0 0 28px rgba(var(--marker),.50) !important}
  .spec .fig span{color:#D7D7D7 !important}

  /* 4. the orange labels beside each row read bigger */
  .rows dt{font-size:15px !important;letter-spacing:.11em !important}

  /* Everything under a section plate centres on that plate, whatever width it ends up.
     The panels are capped in ch units, so their width follows the reader's font and the
     cap binds on some machines and not on others. Auto margins centre either way.
     Aug 31 2026. */
  .col-text > *:not(.sec-plate){margin-left:auto !important;margin-right:auto !important}
  .note,.more.panel-b{margin-left:auto !important;margin-right:auto !important}

/* ---- the four tiles on the home page: glass with colour behind it. Sep 1 2026.
   They already carried a red rule bar, so the glow is matched to it. ---- */
body.home-page #what .card{
  border:1px solid rgba(255,74,32,.34) !important;
  box-shadow:0 22px 28px -8px rgba(0,0,0,.82),0 70px 66px -22px rgba(0,0,0,.72),
    0 3px 6px rgba(0,0,0,.58),
    0 0 20px rgba(255,74,32,.30),0 0 44px rgba(255,74,32,.16),0 0 76px rgba(255,74,32,.08),
    inset 0 0 26px rgba(255,74,32,.07),
    inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(0,0,0,.50) !important}
#what .card h3{color:#F2EDE7 !important}

/* ================= Sep 1 evening: four changes from Cory's screenshots ================= */

/* 1. the hero photo reaches across until it meets the plate, instead of stopping short */
body.has-hero .hero::before{width:58% !important;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 70%,rgba(0,0,0,.60) 88%,transparent 100%)
    !important;
  mask-image:linear-gradient(100deg,#000 0%,#000 70%,rgba(0,0,0,.60) 88%,transparent 100%)
    !important}

/* 2. a red-to-orange line between every section, the same one the header carries */
main > section + section{
  border-top:3px solid var(--red-1) !important;
  border-image:linear-gradient(90deg,var(--red-1) 0%,var(--red-4) 100%) 1 !important}

/* 3. the words stay ranged left, but clear of the bolts. Centring was tried and dropped.
   No !important on the padding, so the wide bottom plate keeps its own right-hand gap. */
.sec-plate{text-align:left !important}
.sec-plate .eyebrow,.sec-plate .crumb,.sec-plate .kicker{
  margin-left:0 !important;margin-right:0 !important}
.sec-plate{padding:38px 62px 34px 104px}

/* 4. room to breathe under every plate */
.sec-plate{margin-bottom:40px !important}

/* 5. the hero photo fades right out before the edge of its own block, so no seam can show */
body.has-hero .hero::before{width:64% !important;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.18) 90%,transparent 97%) !important;
  mask-image:linear-gradient(100deg,#000 0%,#000 56%,rgba(0,0,0,.55) 78%,
    rgba(0,0,0,.18) 90%,transparent 97%) !important}

/* ============ Sep 1: the sections under a plate, from Cory's marked-up screenshots ============ */

/* everything under a plate lines up with the plate, on every page except the coordinator tool */
body.centre-under-plate main > section:not(.hero) .wrap > *{
  margin-left:auto !important;margin-right:auto !important}

/* the lead paragraph and the rows read bigger, to use the space rather than sit in it */
.wrap .lede{font-size:21px !important;line-height:1.55 !important}
.wrap .rows dd{font-size:17px !important;line-height:1.62 !important}
.wrap .rows dt{font-size:15.5px !important}

/* on the resources page a link is green, so it never reads as a heading */
body.resource-links .rows dd a{color:var(--text-green) !important;
  text-decoration:underline !important;text-underline-offset:3px !important;
  text-decoration-color:rgba(68,215,118,.45) !important}
body.resource-links .rows dd a:hover{text-decoration-color:var(--text-green) !important}

/* the green panels were sitting right on top of the paragraph under them */
.lede.accent,.hook,.panel-g{margin-bottom:34px !important}

/* Every hero plate is the same size on every page, and smaller than it was.
   The height comes down by cutting the plate's own top and bottom padding, not by cutting copy.
   Centred vertically so the slack splits above and below. */
.hero .plate{padding:14px 78px 12px !important;min-height:715px !important;
  display:flex !important;flex-direction:column !important;justify-content:center !important}

/* The resources page runs two items across instead of one, so it is half as long
   and the space beside each one is used. The label sits above its text in this mode. */
body.resource-links .rows{display:grid !important;grid-template-columns:1fr 1fr !important;
  column-gap:44px !important}
body.resource-links .rows .r{grid-template-columns:1fr !important;gap:6px !important}
body.resource-links .rows dt{margin:0 0 2px !important}

/* The resources page runs its sections two across, so the page is half as long. Sep 2 2026. */
body.resource-links main{display:grid !important;grid-template-columns:1fr 1fr !important;
  column-gap:0 !important}
body.resource-links main > section.hero,
body.resource-links main > section.backbar{grid-column:1 / -1 !important}
body.resource-links main > section:not(.hero):not(.backbar) .wrap{max-width:none !important;
  padding-left:44px !important;padding-right:44px !important}
body.resource-links main > section:not(.hero):not(.backbar) .rows{
  grid-template-columns:1fr !important}
body.resource-links main > section:not(.hero):not(.backbar) .rows .r{
  grid-template-columns:11rem 1fr !important}

/* Sep 3: every plate is the size of the hero plate. They were 812, 872, 1065 and 1128. */
.sec-plate{max-width:760px !important;margin-left:auto !important;margin-right:auto !important}
section.nocarbon .sec-plate{max-width:760px !important}

/* Every section plate is the same height, so a pair side by side never sits uneven.
   194 is what a two-line heading takes; the one-line ones were 148. Sep 3 2026. */
.sec-plate{min-height:194px !important;display:flex !important;flex-direction:column !important;
  justify-content:center !important}

/* The note at the foot of the resources page runs the full width and sits centred. */
body.resource-links main > section#linknote{grid-column:1 / -1 !important}
body.resource-links #linknote .note{max-width:900px !important;
  margin-left:auto !important;margin-right:auto !important;text-align:center !important}

/* The home page was using five widths inside one section — plate 760, green panel 828,
   paragraphs 757, card rows 1128, blue note 822 — all centred, none sharing an edge.
   Now it uses two: 760 for everything you read, 1128 for a row of cards. Sep 3 2026. */
body.home-page main section:not(.hero) .wrap > *{max-width:760px !important;
  margin-left:auto !important;margin-right:auto !important}
body.home-page main section:not(.hero) .wrap > .grid{max-width:1128px !important}
/* the four tiles stay two across even in a narrower column beside a deck */
body.home-page .col-text .grid.g2{grid-template-columns:1fr 1fr !important}

/* 3 and 5 — the blue notes and the three product cards go green, with a glow. Sep 3 2026. */
body.home-page .note{
  background:linear-gradient(180deg,rgba(21,35,31,.72),rgba(12,22,19,.86)) !important;
  border:1px solid rgba(34,81,55,.85) !important;
  box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),
    0 3px 6px rgba(0,0,0,.55),
    0 0 20px rgba(68,215,118,.28),0 0 44px rgba(68,215,118,.15),0 0 76px rgba(68,215,118,.07),
    inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
body.home-page #get .card{
  border:1px solid rgba(34,81,55,.75) !important;
  box-shadow:0 22px 28px -8px rgba(0,0,0,.80),0 66px 62px -22px rgba(0,0,0,.70),
    0 3px 6px rgba(0,0,0,.55),
    0 0 22px rgba(68,215,118,.30),0 0 48px rgba(68,215,118,.16),0 0 82px rgba(68,215,118,.08),
    inset 0 0 26px rgba(68,215,118,.06),
    inset 0 1px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.50) !important}

/* Where the green glass came off, the wording was two sizes and two left edges — a 21px
   opening paragraph at 176, then 17px paragraphs indented to 208. One size, one edge. */
body.home-page .col-text .lede{font-size:17px !important;line-height:1.62 !important}
body.home-page .col-text p:not(.note),body.home-page .col-text .dim{
  margin-left:0 !important;padding-left:0 !important;max-width:756px !important}

/* 1 — the green panels get their room back on both sides. My paragraph rule above had
   stripped their left padding to nothing, which is why the words sat on the edge. */
body.home-page .note{padding:20px 28px !important;max-width:756px !important}

/* 2 — the four tiles read brighter, like brake lights: you pause, then the green moves you on. */
body.home-page #what .card{
  border:1px solid rgba(255,74,32,.55) !important;
  box-shadow:0 22px 28px -8px rgba(0,0,0,.82),0 70px 66px -22px rgba(0,0,0,.72),
    0 3px 6px rgba(0,0,0,.58),
    0 0 26px rgba(255,74,32,.52),0 0 56px rgba(255,74,32,.30),0 0 96px rgba(255,74,32,.15),
    inset 0 0 30px rgba(255,74,32,.12),
    inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 0 rgba(0,0,0,.50) !important}

/* The lock sat 52 px over the heading once the plate came down to 760. The reserved gap and
   the lock position are now set from the plate width instead of the old 1065. Sep 3 2026. */
/* The lock is gone. That plate keeps enough right-hand padding for its heading to clear the
   bolts, and nothing else. Sep 3 2026. */
section.nocarbon .sec-plate{padding-right:96px !important}

/* Sep 3: bolder and a step bigger across the site. The plate copy takes the biggest change
   because it sits on brushed steel in a condensed face, which is what read as thin. */
.plate p,.plate li,.plate .sub,.hero .plate p{
  font-size:20px !important;font-weight:700 !important;line-height:1.55 !important}
.lede,.hook,.note{font-size:19px !important;font-weight:500 !important}
.rows dd{font-size:18px !important;font-weight:500 !important}
.card p,.card li{font-weight:500 !important}

/* Sep 4: the two-across resources layout had no narrow-screen escape, so the page scrolled
   sideways at every window under 820. Two across becomes one at 900. */
@media (max-width:900px){
  body.resource-links main{grid-template-columns:1fr !important}
  body.resource-links main > section{min-width:0 !important}
  body.resource-links main > section:not(.hero):not(.backbar) .wrap{
    padding-left:20px !important;padding-right:20px !important}
}

/* On a phone the row label stops sitting beside its text and sits above it. Sep 4 2026. */
@media (max-width:430px){
  .rows .r{grid-template-columns:1fr !important;gap:6px !important}
  body.resource-links main > section:not(.hero) .rows .r{grid-template-columns:1fr !important}
}

/* Sep 4: the buy button is bigger and reads as a thing you press — a warmer red, a lift,
   and a glow so it stands off the leather instead of lying flat on it. */
.btn{font-size:22px !important;padding:18px 40px !important;border-radius:8px !important;
  letter-spacing:.01em !important;
  background:linear-gradient(180deg,#D01F0C 0%,#9C0C00 100%) !important;
  border:1px solid rgba(255,140,110,.45) !important;
  box-shadow:0 14px 22px -6px rgba(0,0,0,.72),0 40px 46px -20px rgba(0,0,0,.55),
    0 0 24px rgba(255,74,32,.42),0 0 54px rgba(255,74,32,.22),
    inset 0 1px 0 rgba(255,255,255,.30),inset 0 -3px 0 rgba(0,0,0,.32) !important;
  transition:transform .12s ease, box-shadow .12s ease !important}
.btn:hover{transform:translateY(-2px) !important;
  box-shadow:0 18px 26px -6px rgba(0,0,0,.75),0 46px 52px -20px rgba(0,0,0,.58),
    0 0 30px rgba(255,74,32,.55),0 0 66px rgba(255,74,32,.30),
    inset 0 1px 0 rgba(255,255,255,.34),inset 0 -3px 0 rgba(0,0,0,.32) !important}

/* The home page notes went green, so their opening sentence goes green too. Sep 4 2026. */
body.home-page .note b.lead-b{color:var(--text-green) !important}

/* SEP 4 AFTERNOON — read off Cory's own phone screenshots, then reproduced and measured.
   Two layouts stayed two-across on a phone because neither had a narrow-screen escape.
   Each rule below repeats the whole selector it has to beat, so specificity matches and
   position decides the tie. Marking a rule important does not settle a tie on its own. */

/* The home page's four tiles ran two across at every width, so on a 412 phone each column
   was 199 and 166 wide and the headings ran three words to a line. Below 700 they go one
   across. NOT TO TOUCH: .g2 anywhere outside the home page's own text column. */
@media (max-width:700px){
  body.home-page .col-text .grid.g2{grid-template-columns:1fr !important}
}

/* The resources page's link labels sat BESIDE their text in a fixed 11rem column at every
   width, so on a 412 phone the label took 176 and the text was left with 124. The Sep 4 rule
   meant to stack them named one fewer exception than the Sep 2 rule it had to beat, so it
   never applied. This one carries both exceptions and matches it. Below 700 the label sits
   above its text, which is what the other four pages already do.
   NOT TO TOUCH: the label layout above 700, where there is room for it to sit beside. */
@media (max-width:700px){
  body.resource-links main > section:not(.hero):not(.backbar) .rows .r{
    grid-template-columns:1fr !important;gap:6px !important}
}

/* SEP 4 AFTERNOON — his ruling, having seen 78, 40 and 22 rendered side by side: "Go with 40."
   The plate kept 78 px of side padding at every width, which is a fifth of a 760 plate on a
   desktop and 58 percent of a 268 plate at 320. Below 700 the sides come in to 40.
   NOT TO TOUCH: the top and bottom padding, the 715 floor, the section plates, or any window
   at 700 and above, where 78 stays exactly as it is. */
@media (max-width:700px){
  .hero .plate{padding-left:40px !important;padding-right:40px !important;
    padding-top:76px !important;padding-bottom:74px !important}
}

/* ---- October 11, 2026: the heading colour ----------------------------------
   Measured off rendered pixels: the brand red on the brushed plate read between
   1.00 and 1.23 where large text needs 3.0, on 29 of the 36 headings.

   The arithmetic leaves very little room. Bright red sits at a luminance of about
   0.22. To clear 3.0 the background behind it has to be below 0.04 or above 0.76 -
   dark, or near-white. The plate is 0.24, which is squarely in the gap. So either
   the background moves a long way or the ink does.

   Six treatments were built and measured. A dark slab behind the heading cleared
   it and Cory rejected the look. Darkening the whole plate made the body copy on
   it unreadable. Lifting the plate to near-white cleared it and stopped the plate
   looking like metal.

   What is here changes one thing only: the ink. The plate, the bevel, the bolts
   and the body copy are exactly as they were. The gradient keeps its shape - red
   through to rust - at a depth that clears on the darkest part of the plate.
   Measured after: 3.15 at worst, against a requirement of 3.0. -------------- */
.sec-plate h1, .sec-plate h2, .sec-plate h3,
.plate h1, .plate h2, .hero .plate h1, .hero .plate h2{
  background:none !important; filter:none !important;
}
/* ---- October 26, 2026: the two legal pages ----------------------------------
   The attorney's text carries an email address and a web address that are one
   unbroken word each. At 320 to 390 they pushed the page sideways. These rules
   let a long address wrap and set the reading width.
   SCOPED TO body.legal-page ONLY. They MUST NOT reach the other five pages —
   wrapping mid-word anywhere else would break headings and the plate copy. */
body.legal-page .wrap p,
body.legal-page .wrap li{overflow-wrap:anywhere}
body.legal-page .wrap h2{margin-top:44px;margin-bottom:14px;font-size:27px;
  letter-spacing:.02em;color:#F0F0F0}
body.legal-page .wrap h3{margin-top:28px;margin-bottom:8px;font-size:18px;
  letter-spacing:.04em;color:#CFCFCF}
body.legal-page p.addr{line-height:1.85}

/* The plate on a legal page is a nameplate, not a hero: as wide as the page and only
   as tall as the words on it. The 715px floor and the right-hand offset are the hero
   rules, and neither suits two lines of text.
   SCOPED TO body.legal-page. MUST NOT reach the other five pages — their plates carry
   a headline, body copy and buttons, and the floor is what keeps them matching. */
body.legal-page .hero{padding:30px 0 26px !important}
/* The bolts are 58px wide and sit 14px in, so anything inside the plate has to stay
   clear of the last 72px on each side. 74px of padding left 2px, which is not a gap.
   100px gives the dates real room, and keeps it whatever font the reader's machine has.
   DO NOT LOWER THE SIDE PADDING BELOW 96px while the dates sit on the right. */
body.legal-page .hero .plate{max-width:none !important;margin-left:0 !important;
  min-height:0 !important;display:block !important;
  padding:34px 100px 30px !important}
/* The wording is laid across the plate rather than stacked in one corner: the name on
   the left, the dates set against the right edge, both on the same centre line. That is
   what uses the width instead of leaving two-thirds of the steel empty.
   Below 900 there is no room for two columns, so it stacks. */
body.legal-page .hero .plate{display:grid !important;
  grid-template-columns:1fr auto;align-items:center;column-gap:44px}
body.legal-page .hero .plate .crumb{grid-column:1;grid-row:1;margin:0 0 8px}
body.legal-page .hero .plate h1.ptitle{grid-column:1;grid-row:2;margin:0}
body.legal-page .hero .plate .psub{grid-column:2;grid-row:1 / 3;margin:0;
  text-align:right;font-size:16px;line-height:1.7}
@media (max-width:900px){
  body.legal-page .hero .plate{grid-template-columns:1fr !important}
  body.legal-page .hero .plate .psub{grid-column:1;grid-row:3;text-align:left;
    margin-top:10px}
}

/* On a phone a 100px side padding leaves about 160px of text, so every line wraps three
   times. Below 700 the sides come in to 40 and the copy drops below the bolt line
   instead — the same answer the other five plates already use.
   MUST NOT change the side padding above 700, where the dates sit on the right and need
   the full 100px to clear the bolts. */
@media (max-width:700px){
  body.legal-page .hero .plate{padding:76px 40px 74px !important}
  body.legal-page .hero .plate h1.ptitle{font-size:34px}
  body.legal-page .hero .plate .psub{font-size:15px}
}

/* One reading column, centred on the page, the same left edge for every part of it.
   Headings, paragraphs, lists and the panels all share it, so nothing sticks out. */
body.legal-page main > section:not(.hero) > .wrap{max-width:1000px}
body.legal-page .wrap p,body.legal-page .wrap ul,
body.legal-page .wrap h2,body.legal-page .wrap h3{max-width:none}

/* The all-capital panels sat 110px right of the text and 114px wider, and carried no
   bottom margin at all — so their 62px shadow fell straight onto the paragraph under
   them, which is what made that text look hidden. Same width, same edge, room below. */
body.legal-page .wrap p.note{max-width:none !important;
  margin:30px 0 40px !important;padding:22px 28px !important;
  box-shadow:0 10px 16px -6px rgba(0,0,0,.70),0 2px 5px rgba(0,0,0,.50),
    0 0 18px rgba(64,124,196,.26),0 0 34px rgba(64,124,196,.12),
    inset 0 1px 0 rgba(255,255,255,.13),inset 0 -3px 0 rgba(0,0,0,.45) !important}
body.legal-page .wrap ul{margin:0 0 17px;padding-left:22px;max-width:70ch;color:var(--ink)}
body.legal-page .wrap li{padding:3px 0}
body.legal-page p.addr{line-height:1.85}

.sec-plate h1 > .hx, .sec-plate h2 > .hx, .sec-plate h3 > .hx,
.plate h1 > .hx, .plate h2 > .hx, .hero .plate h1 > .hx, .hero .plate h2 > .hx{
  background:linear-gradient(100deg,#790000 0%,#741000 46%,#682000 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.45));
}