/* TradeMade Software. Workwear palette: duck canvas, tan, charcoal, hi-vis. Readable and complete with no JS. */
:root{
  --duck:#8A5A2B;--duck-dk:#5E3B1A;--tan:#C9A26B;--tan-lt:#E2C79B;--canvas:#EFE4D0;--cream:#F7F1E6;
  --char:#26221F;--char-2:#1A1715;--hv:#E8601C;--hv-dk:#C94E12;--bp:#1E3550;--bp-line:rgba(226,199,155,.16);
  --f-d:"Archivo","Arial Narrow",sans-serif;--f-b:"Public Sans",system-ui,sans-serif;--f-m:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1240px;--gut:clamp(16px,4vw,40px);--r:6px;
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--char);font:400 17px/1.6 var(--f-b);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-d);font-weight:900;text-transform:uppercase;letter-spacing:-.005em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--hv);color:var(--char);padding:10px 14px;z-index:999;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--hv);outline-offset:3px}

/* canvas grain over everything */
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--hv);transform:scaleX(0);transform-origin:0 50%}

/* type */
.eyebrow{font:500 12px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--tan);display:flex;align-items:center;gap:10px;margin-bottom:22px}
.eyebrow-dk{color:var(--duck-dk)}
.eyebrow-bp{color:var(--tan-lt)}
.eyebrow .dot,.live .dot{width:8px;height:8px;border-radius:50%;background:var(--hv);box-shadow:0 0 0 0 rgba(232,96,28,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,96,28,.55)}70%{box-shadow:0 0 0 12px rgba(232,96,28,0)}100%{box-shadow:0 0 0 0 rgba(232,96,28,0)}}
.mega{font-stretch:62%;font-size:clamp(58px,8vw,150px);line-height:.84;letter-spacing:-.01em}
.mega .ln{display:block;overflow:hidden;padding-bottom:.04em}
.mega-sm{font-size:clamp(48px,8vw,120px)}
.big{font-stretch:68%;font-size:clamp(40px,6.2vw,92px);line-height:.9;max-width:16ch}
.big-lt{color:var(--cream)}
.big .u{color:var(--duck);background:linear-gradient(var(--hv),var(--hv)) 0 92%/0 .12em no-repeat;transition:background-size .9s cubic-bezier(.2,.8,.2,1)}
.big.is-in .u,.no-motion .big .u{background-size:100% .12em}
.hl{color:var(--hv)}
.hl-tan{color:var(--tan)}
.sub{font-size:clamp(17px,1.5vw,20px);max-width:56ch;margin-top:24px;color:#4A413A}
.lede{font-size:clamp(18px,1.7vw,22px);max-width:40ch;margin-top:28px;color:var(--canvas)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 15px/1 var(--f-d);font-stretch:85%;text-transform:uppercase;letter-spacing:.07em;text-decoration:none;padding:18px 26px;border:3px solid var(--char);border-radius:2px;cursor:pointer;will-change:transform}
.btn-hv{background:var(--hv);color:var(--char);box-shadow:5px 5px 0 var(--char);transition:box-shadow .2s,transform .2s,background .2s}
.btn-hv:hover{background:#F2702C;box-shadow:2px 2px 0 var(--char)}
.btn-hv:not(.magnetic):hover{transform:translate(3px,3px)}
.btn-line{background:transparent;color:var(--cream);border-color:var(--tan)}
.btn-line:hover{background:var(--tan);color:var(--char)}
.btn-sm{padding:12px 16px;font-size:13px;box-shadow:3px 3px 0 var(--char)}
.btn-lg{padding:24px 36px;font-size:18px}

/* logo (direction C) */
.logo{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.logo-w{font:900 30px/.86 var(--f-d);font-stretch:65%;text-transform:uppercase;color:var(--cream)}
.logo-w em{font-style:normal;color:var(--tan)}
.logo-bar{display:block;height:4px;background:var(--hv);margin:4px 0 3px}
.logo-s{font:700 9px/1 var(--f-d);font-stretch:95%;letter-spacing:.42em;text-transform:uppercase;color:var(--cream)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:28px;padding:16px var(--gut);transition:background .3s,padding .3s,transform .35s}
.nav.solid{background:rgba(26,23,21,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:10px;padding-bottom:10px}
.nav.hide{transform:translateY(-110%)}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font:600 13px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--canvas);text-decoration:none;position:relative;padding:6px 0}
.menu a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hv);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.menu a:hover:after{transform:scaleX(1)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:3px;background:var(--cream);transition:transform .3s}
.burger span:first-child{top:16px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;background:var(--char);color:var(--cream);padding:150px 0 0;overflow:hidden;min-height:100vh;display:flex;flex-direction:column}
.hero:before{content:"";position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 78% 40%,rgba(138,90,43,.38),transparent 60%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 2px,transparent 2px 6px);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;flex:1;width:100%}
.hero-note{margin-top:18px;font:500 13px/1.5 var(--f-m);color:var(--tan);letter-spacing:.02em;max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
.hero-art{position:relative;aspect-ratio:5/6;width:100%;max-width:600px;justify-self:end}
.rig{position:absolute;inset:0;width:100%;height:100%}
.tag{position:absolute;background:var(--cream);color:var(--char);border:2px solid var(--char-2);padding:9px 12px 8px;border-radius:3px;box-shadow:4px 4px 0 rgba(0,0,0,.35);transform:translate(-50%,-50%);white-space:nowrap}
.tag:before{content:"";position:absolute;left:-7px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--char);border:2px solid var(--tan);transform:translateY(-50%)}
.tag b{display:block;font:900 20px/1 var(--f-d);font-stretch:68%;text-transform:uppercase}
.tag i{display:block;font:500 10.5px/1.3 var(--f-m);font-style:normal;color:var(--duck-dk);margin-top:3px}
.t1:before,.t3:before,.t5:before{left:auto;right:-7px}
.t7:before{left:50%;top:auto;bottom:-7px;transform:translateX(-50%)}.t8:before{left:50%;top:-7px;transform:translateX(-50%)}
.t1{left:17%;top:23%}.t2{left:83%;top:23%}.t3{left:12%;top:50%}.t4{left:88%;top:51%}.t5{left:17%;top:77%}.t6{left:83%;top:77%}.t7{left:50%;top:6%}.t8{left:50%;top:94%}
.tag .ph{position:absolute;bottom:100%;left:50%;width:88px;height:88px;margin:0 0 6px -44px;border-radius:50%;overflow:hidden;background:var(--char);border:3px solid var(--char-2);box-shadow:0 0 0 3px var(--tan),4px 4px 0 rgba(0,0,0,.35);transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .5s}
.tag .ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.12)}
.hero .t7{top:11%}.hero .t1,.hero .t2{top:27%}.hero .t3,.hero .t4{top:55%}.hero .t5,.hero .t6{top:82%}.hero .t8{top:96%}
.tag{transition:border-color .5s}
.tag.on{border-color:var(--hv)}
.tag.on .ph{transform:scale(1.16);box-shadow:0 0 0 3px var(--hv),0 0 0 10px rgba(232,96,28,.22),4px 4px 0 rgba(0,0,0,.35)}
.stitches path.flow{stroke:var(--hv);animation:stitch-flow .7s linear infinite}
@keyframes stitch-flow{to{stroke-dashoffset:-28}}
.rig{overflow:visible}
.sat-lines line{opacity:.2;transition:opacity .6s,stroke .6s}
.sat-lines line.on{opacity:.95;stroke:var(--hv)}.sat-lines line.done{opacity:.8;stroke:var(--tan-lt)}
.sats{position:absolute;inset:0;pointer-events:none}
html:not(.js) .hero-home .stitches{display:none}
.sats,.sat-lines{opacity:0;transition:opacity .9s}.rig-ready .sats,.rig-ready .sat-lines{opacity:1}
.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}
.sat{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:2}
.sat-i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--char-2);border:1.5px solid rgba(201,162,107,.3);color:rgba(201,162,107,.42);transition:color .5s,border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sat-i svg{width:17px;height:17px}
.sat.on .sat-i{color:var(--cream);border-color:var(--hv);background:var(--hv-dk);box-shadow:0 0 0 5px rgba(232,96,28,.22);transform:scale(1.12)}
.sat.done .sat-i{color:var(--char);border-color:var(--tan-lt);background:var(--tan);box-shadow:0 0 0 3px rgba(201,162,107,.18)}
.sat-l{position:absolute;top:50%;transform:translateY(-50%);width:max-content;max-width:158px;font:500 11px/1.25 var(--f-m);color:rgba(226,199,155,.82);transition:color .5s}
.sat[data-side="r"] .sat-l{left:calc(100% + 8px);text-align:left}
.sat[data-side="l"] .sat-l{right:calc(100% + 8px);text-align:right}
.sat[data-side="b"] .sat-l{top:calc(100% + 6px);left:50%;transform:none;translate:-50% 0;text-align:center}
.sat[data-side="t"] .sat-l{top:auto;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);text-align:center}
.sat.on .sat-l{color:var(--cream)}.sat.done .sat-l{color:var(--cream)}
.sat.on{z-index:4}
.hero-art.paused .stitches path.flow{animation-play-state:paused}
.art-play{position:absolute;left:0;bottom:-38px;background:none;border:1px solid rgba(201,162,107,.55);border-radius:2px;color:var(--tan);font:600 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;cursor:pointer}
.art-play:hover,.art-play:focus-visible{border-color:var(--hv);color:var(--cream)}
.art-note{position:absolute;right:0;bottom:-34px;margin:0;font:500 11px/1 var(--f-m);letter-spacing:.04em;color:var(--tan)}
.core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--duck);border:3px solid var(--char-2);padding:18px 22px 14px;text-align:center;box-shadow:0 0 0 10px rgba(138,90,43,.18),0 0 0 22px rgba(138,90,43,.08),8px 8px 0 rgba(0,0,0,.4);border-radius:4px}
.core:after{content:"";position:absolute;inset:6px;border:2px dashed rgba(247,241,230,.55);border-radius:2px;pointer-events:none}
.core-w{display:block;font:900 44px/.85 var(--f-d);font-stretch:62%;text-transform:uppercase}
.core-w em{font-style:normal;color:var(--tan-lt)}
.core-bar{display:block;height:5px;background:var(--hv);margin:6px 0 5px}
.core-s{display:block;font:700 10px/1 var(--f-d);letter-spacing:.42em;text-transform:uppercase}

.tape{position:relative;z-index:3;margin-top:70px;background:var(--hv);color:var(--char);border-top:3px solid var(--char-2);border-bottom:3px solid var(--char-2);overflow:hidden}
.tape-track{display:flex;width:max-content;animation:tape 38s linear infinite}
.tape span{font:900 22px/1 var(--f-d);font-stretch:70%;text-transform:uppercase;letter-spacing:.04em;padding:16px 26px;display:flex;align-items:center;gap:26px;white-space:nowrap}
.tape span:after{content:"";width:12px;height:12px;background:var(--char);transform:rotate(45deg)}
@keyframes tape{to{transform:translateX(-50%)}}

/* trades */
.trades{padding:140px 0 120px;background:var(--canvas)}
.trades-head{margin-bottom:60px}
.track{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{min-height:300px;background:var(--cream);border:3px solid var(--char);border-radius:4px;padding:28px 26px;display:flex;flex-direction:column;text-decoration:none;position:relative;box-shadow:8px 8px 0 var(--char);transition:transform .3s,box-shadow .3s}
a.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--char)}
.card .num{font:600 13px/1 var(--f-m);color:var(--duck);letter-spacing:.1em}
.card h3{font-stretch:65%;font-size:40px;line-height:.9;margin:auto 0 14px;padding-top:40px}
.card p{font-size:16px;color:#4A413A}
.card .go{margin-top:22px;font:700 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--char);display:flex;align-items:center;gap:8px}
.card .go:after{content:"→";color:var(--hv);font-size:18px;transition:transform .3s}
a.card:hover .go:after{transform:translateX(6px)}
.card-oc{background:var(--duck);color:var(--cream)}
.card-oc p,.card-oc .go,.card-oc .num{color:var(--cream)}
.card-stamp{background:var(--char);color:var(--cream);justify-content:flex-end}
.card-stamp p{color:var(--canvas);font-size:17px}
.stamp{position:absolute;top:34px;left:24px;font:900 50px/.9 var(--f-d);font-stretch:62%;text-transform:uppercase;color:var(--hv);border:5px solid var(--hv);padding:8px 14px 4px;transform:rotate(-7deg);border-radius:4px;letter-spacing:.02em;mix-blend-mode:screen}

/* voices */
.voices{background:var(--char-2);color:var(--cream);padding:140px 0;position:relative;overflow:hidden}
.voices:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(201,162,107,.05) 0 1px,transparent 1px 120px);pointer-events:none}
.disclaim{font:500 12.5px/1.5 var(--f-m);color:var(--tan);margin-top:20px;max-width:60ch}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:70px;position:relative}
.note{margin:0;background:var(--canvas);color:var(--char);padding:30px 26px 22px;border-radius:2px;position:relative;box-shadow:0 18px 30px rgba(0,0,0,.35)}
.note:before{content:"";position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#bbb,#555);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.note blockquote{margin:0;font:800 24px/1.12 var(--f-d);font-stretch:78%;text-transform:none}
.note blockquote:before{content:"“";display:block;font-size:64px;line-height:.6;color:var(--hv);height:22px}
.note figcaption{margin-top:18px;font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--duck)}
.n1{transform:rotate(-2deg)}.n2{transform:rotate(1.5deg) translateY(30px)}.n3{transform:rotate(-1deg)}.n4{transform:rotate(1deg)}.n5{transform:rotate(-1.6deg) translateY(24px)}.n6{transform:rotate(2deg)}
.answer{margin-top:90px;font:800 clamp(26px,3vw,40px)/1.15 var(--f-d);font-stretch:80%;max-width:30ch;color:var(--canvas)}
.answer b{color:var(--hv);font-weight:900}

/* proof */
.proof{background:var(--canvas);padding:150px 0 110px}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.proof-pin{position:sticky;top:120px}
.rule{margin-top:44px;height:6px;background:rgba(38,34,31,.12);position:relative;max-width:420px}
.rule-fill{position:absolute;inset:0;background:var(--hv);transform:scaleX(0);transform-origin:0 50%}
.steps{list-style:none;margin:0;padding:0;border-left:3px dashed var(--duck);}
.step{padding:0 0 90px 44px;position:relative;opacity:1}
.step:last-child{padding-bottom:10px}
.step:before{content:"";position:absolute;left:-13px;top:4px;width:22px;height:22px;background:var(--canvas);border:4px solid var(--duck);border-radius:50%;transition:background .4s,border-color .4s}
.step.on:before{background:var(--hv);border-color:var(--char)}
.step-k{font:600 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--duck)}
.step h3{font-stretch:66%;font-size:clamp(36px,4.2vw,60px);line-height:.92;margin:14px 0 16px}
.step p{font-size:18px;max-width:44ch;color:#3B332D}
.meter{display:flex;align-items:center;gap:14px;margin-top:26px;font:900 28px/1 var(--f-d);font-stretch:66%}
.m-bar{flex:1;height:14px;background:rgba(38,34,31,.12);border:2px solid var(--char);position:relative;max-width:260px}
.m-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:repeating-linear-gradient(135deg,var(--hv) 0 8px,var(--hv-dk) 8px 16px);transform-origin:0 50%}
.m-to{color:var(--hv)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:110px;border:3px solid var(--char);background:var(--cream)}
.stat{padding:30px 24px;border-right:3px solid var(--char)}
.stat:last-child{border-right:0}
.stat b{display:block;font:900 clamp(44px,5vw,72px)/.9 var(--f-d);font-stretch:62%;color:var(--duck)}
.stat:last-child b{font-size:clamp(30px,3vw,42px);color:var(--char);padding-top:10px}
.stat > span{display:block;margin-top:10px;font-size:15px;color:#4A413A}

/* case */
.case{background:var(--duck);color:var(--cream);padding:150px 0;position:relative;overflow:hidden}
.case:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px);pointer-events:none}
.case .wrap{position:relative}
.case-logo{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.case-logo img{width:260px;background:var(--cream);padding:14px 18px;border-radius:4px;border:3px solid var(--char-2);box-shadow:5px 5px 0 var(--char-2)}
.live{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;background:var(--char-2);padding:10px 14px;border-radius:30px}
.case .eyebrow{color:var(--tan-lt)}
.case .big{max-width:18ch}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px;font-size:18px}
.callout{grid-column:1/-1;background:var(--char-2);border-left:10px solid var(--hv);padding:30px 34px;font:800 clamp(22px,2.4vw,32px)/1.18 var(--f-d);font-stretch:80%}
.callout .who{font:500 12px/1.4 var(--f-m);letter-spacing:.08em;color:var(--tan);margin-top:16px;text-transform:uppercase}
.case-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:70px;border-top:3px solid var(--char-2);border-bottom:3px solid var(--char-2)}
.case-nums div{padding:30px 24px 30px 0}
.case-nums b{display:block;font:900 clamp(70px,8vw,120px)/.85 var(--f-d);font-stretch:62%;color:var(--cream)}
.case-nums div > span{display:block;margin-top:10px;color:var(--tan-lt);font-size:15px;max-width:26ch}
.caps{list-style:none;padding:0;margin:70px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.caps li{background:rgba(26,23,21,.38);border:1px solid rgba(247,241,230,.18);padding:18px;border-radius:3px;font-size:14.5px;color:var(--canvas);line-height:1.45}
.caps b{display:block;font:900 20px/1 var(--f-d);font-stretch:70%;text-transform:uppercase;color:var(--cream);margin-bottom:8px}

/* stack: layers and what they replace */
.stack{background:var(--char-2);color:var(--cream);padding:150px 0 120px;position:relative;overflow:hidden;overflow:clip} /* clip, not hidden: hidden would make this the scroll container and stop the tally sticking */
.stack:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(201,162,107,.045) 0 1px,transparent 1px 64px);pointer-events:none}
.sub-lt{color:#CDBFA8}
.stack .wrap,.bench .wrap{position:relative}
.stack-head{max-width:820px}
.stack-grid{display:grid;grid-template-columns:260px 1fr;gap:56px;margin-top:80px;align-items:start}
.tally{grid-row:1/3;position:sticky;top:120px;border:3px solid var(--tan);padding:24px 22px;border-radius:3px;background:rgba(26,23,21,.6)}
.tally-k,.tally-s{display:block;font:500 11.5px/1.4 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--tan)}
.tally-n{display:block;font:900 120px/.85 var(--f-d);font-stretch:62%;color:var(--hv);margin:14px 0 12px;font-variant-numeric:tabular-nums}
.tally-bar{display:block;height:8px;background:rgba(201,162,107,.2);margin-bottom:14px}
.tally-bar span{display:block;height:100%;width:100%;background:var(--hv);transform-origin:left;transform:scaleX(0)}
.no-motion .tally-bar span{transform:none}
.layers{list-style:none;margin:0;padding:0;display:grid;gap:14px;perspective:1200px}
.layer{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:center;background:var(--cream);color:var(--char);border:3px solid var(--char);border-left:10px solid var(--duck);padding:22px 24px;border-radius:3px;box-shadow:6px 6px 0 rgba(0,0,0,.45);transform-origin:50% 100%}
.layer:nth-child(even){border-left-color:var(--tan)}
.ly-k{font:600 11.5px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--duck-dk)}
.ly-b h3{font-stretch:70%;font-size:clamp(22px,2.2vw,30px);line-height:1}
.ly-b p{margin-top:6px;font-size:15.5px;color:#4A413A;max-width:52ch}
.ly-r{min-width:190px;border-left:2px dashed rgba(38,34,31,.25);padding-left:22px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.ly-rk{font:600 11px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-dk);margin-bottom:10px}
.ly-x{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ly-x li{font:800 19px/1.05 var(--f-d);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em;color:var(--char);display:flex;align-items:center;gap:10px}
.ly-x li:before{content:"";flex:none;width:8px;height:8px;background:var(--hv);transform:rotate(45deg)}
.layer-ai{border-left-color:var(--hv)}
.layer-core{grid-template-columns:150px 1fr;background:var(--duck);color:var(--cream);border-left-color:var(--hv);box-shadow:0 0 0 8px rgba(232,96,28,.15),6px 6px 0 rgba(0,0,0,.45)}
.layer-core .ly-k{color:var(--tan-lt)}.layer-core .ly-b p{color:var(--canvas)}
.layer-core h3 em{font-style:normal;color:var(--tan-lt)}
.tm-note{font:500 11.5px/1.5 var(--f-m);color:rgba(201,162,107,.75);margin-top:44px;max-width:80ch}
.tm-note-dk{color:var(--duck-dk)}


.more{grid-column:2;margin-top:10px;border:2px dashed rgba(201,162,107,.4);border-radius:3px;padding:24px 26px}
.more-k{font:600 12px/1.4 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--tan);margin-bottom:16px}
.more-x{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.more-x li{font:700 13px/1 var(--f-m);color:var(--cream);background:rgba(247,241,230,.07);border:1px solid rgba(201,162,107,.35);padding:9px 11px;border-radius:2px}
.layer-data{border-left-color:var(--bp)}

/* digital twin */
.twin{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:130px;padding-top:90px;border-top:2px dashed rgba(201,162,107,.25)}
.twin-h{font-stretch:66%;font-size:clamp(40px,5vw,76px);line-height:.9;color:var(--cream)}
.twin-h span{color:var(--hv)}
.twin-pts{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.twin-pts li{position:relative;padding-left:26px;color:#CDBFA8;font-size:16.5px}
.twin-pts li:before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;background:var(--hv);transform:rotate(45deg)}
.twin-pts b{color:var(--cream)}
.twin-art{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;justify-self:center}
.tw-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tw-lines line{stroke:var(--tan);stroke-width:.35;stroke-dasharray:1.2 1.2;opacity:.7}
.tw-pulses circle{fill:var(--hv)}
.tw-node{position:absolute;transform:translate(-50%,-50%);background:var(--cream);color:var(--char);border:2px solid var(--char-2);border-radius:3px;padding:9px 12px 8px;text-align:center;box-shadow:4px 4px 0 rgba(0,0,0,.45);white-space:nowrap;z-index:1}
.tw-node b{display:block;font:900 19px/1 var(--f-d);font-stretch:68%;text-transform:uppercase}
.tw-node i{display:block;font:500 10.5px/1.3 var(--f-m);font-style:normal;color:var(--duck-dk);margin-top:3px}
.tw-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1/1;border-radius:50%;background:var(--duck);border:3px solid var(--char-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 10px rgba(138,90,43,.2),0 0 60px rgba(232,96,28,.35);z-index:2}
.tw-core b{font:900 clamp(20px,2.4vw,30px)/.9 var(--f-d);font-stretch:64%;text-transform:uppercase;color:var(--cream)}
.tw-core i{font:500 10.5px/1.3 var(--f-m);font-style:normal;color:var(--tan-lt);margin-top:5px;letter-spacing:.06em;text-transform:uppercase}
.tw-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--hv);opacity:0;animation:twring 3s ease-out infinite}
.tw-ring.r2{animation-delay:1.5s}
@keyframes twring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}


/* pricing */
.price{background:var(--canvas);padding:150px 0 120px}
.price-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;margin-top:70px;align-items:start}
.pr-rules{display:grid;gap:18px}
.pr-rule{background:var(--cream);border:3px solid var(--char);border-radius:3px;padding:24px 26px;display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center;box-shadow:6px 6px 0 var(--char)}
.pr-k{grid-column:1/-1;font:600 11.5px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--duck);margin-bottom:12px}
.pr-rule b{font:900 clamp(56px,6vw,84px)/.85 var(--f-d);font-stretch:62%;color:var(--hv-dk)}
.pr-rule p{font-size:16px;color:#4A413A}
.pr-rule strong{color:var(--char)}
.pr-rule .pr-first{grid-column:1/-1;margin-top:14px;padding-top:14px;border-top:2px dashed rgba(38,34,31,.2);font-size:15px;color:var(--char);font-weight:600}
.pr-rule-dk{background:var(--char);border-color:var(--char)}
.pr-rule-dk .pr-k{color:var(--tan)}.pr-rule-dk b{color:var(--hv)}.pr-rule-dk p{color:var(--canvas)}
.calc{background:var(--char);color:var(--cream);border:3px solid var(--char-2);border-radius:4px;padding:32px 30px 30px;box-shadow:10px 10px 0 var(--hv)}
.calc-k{display:block;font:600 12px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--tan)}
.calc-row{display:flex;align-items:baseline;gap:6px;margin:14px 0 10px;border-bottom:3px solid var(--tan);padding-bottom:6px}
.calc-cur{font:900 46px/1 var(--f-d);font-stretch:62%;color:var(--tan)}
#calc-in{flex:1;min-width:0;background:none;border:0;color:var(--cream);font:900 64px/1 var(--f-d);font-stretch:62%;padding:0;-moz-appearance:textfield}
#calc-in::-webkit-outer-spin-button,#calc-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#calc-in:focus{outline:none}.calc-row:focus-within{border-color:var(--hv)}
#calc-range{width:100%;accent-color:var(--hv);margin:8px 0 26px;height:28px}
.calc-bars{display:grid;gap:16px}
.cb{display:grid;grid-template-columns:150px 1fr 96px;gap:14px;align-items:center}
.cb-l{font:600 11.5px/1.2 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#CDBFA8}
.cb-t{height:26px;background:rgba(201,162,107,.12);border-radius:2px;overflow:hidden}
.cb-f{display:block;height:100%;width:100%;transform-origin:left;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cb-today{background:repeating-linear-gradient(45deg,#8F8478 0 6px,#776D62 6px 12px)}
.cb-y1{background:var(--tan)}
.cb-run{background:var(--hv)}
.cb b{font:900 26px/1 var(--f-d);font-stretch:66%;text-align:right;font-variant-numeric:tabular-nums}
.calc-sum{margin-top:26px;font-size:17px;color:var(--canvas)}
.calc-sum b{color:var(--cream)}.calc-sum .calc-save{color:var(--hv)}
.calc-note{margin-top:12px;font:500 12px/1.55 var(--f-m);color:#A89C8C}
.btn-block{display:flex;width:100%;margin-top:22px}

/* bench: estimating, structural, CAD */
.bench{background-color:var(--cream);padding:150px 0;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(30,53,80,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(30,53,80,.07) 1px,transparent 1px);background-size:32px 32px}
.bench-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:70px}
.tool{position:relative;background:#fff;border:3px solid var(--char);border-radius:3px;padding:30px 26px 28px;box-shadow:8px 8px 0 var(--char)}
.tool-ico{width:64px;height:64px;color:var(--char);margin-bottom:22px}
.tool-ico .draw{stroke-dasharray:200;stroke-dashoffset:0}
.tool-k{display:block;font:600 11.5px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--duck)}
.tool h3{font-stretch:70%;font-size:34px;line-height:.95;margin:10px 0 14px}
.tool p{font-size:16px;color:#4A413A}
.tool-next{background:var(--bp);color:var(--cream);border-style:dashed}
.tool-next .tool-ico{color:var(--tan-lt)}.tool-next .tool-k{color:var(--tan)}.tool-next p{color:#CFD6DE}
.soon{position:absolute;top:-16px;right:18px;background:var(--hv);color:var(--char);font:800 12px/1 var(--f-d);font-stretch:85%;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border:2px solid var(--char);transform:rotate(3deg)}

/* ways */
.ways{background:var(--char);color:var(--cream);padding:150px 0}
.ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:70px}
.way{border:3px solid var(--tan);padding:34px 30px;border-radius:4px;position:relative;background:var(--char-2)}
.way-hot{background:var(--duck);border-color:var(--hv);box-shadow:8px 8px 0 var(--hv)}
.way-n{font:900 90px/.8 var(--f-d);font-stretch:62%;color:var(--tan)}
.way-hot .way-n{color:var(--cream)}
.flag{position:absolute;top:-14px;right:20px;background:var(--hv);color:var(--char);font:800 12px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border:2px solid var(--char-2)}
.way h3{font-stretch:68%;font-size:36px;line-height:.95;margin:26px 0 14px}
.way p{color:var(--canvas)}
.ways-note{margin-top:40px;font:500 14px/1.6 var(--f-m);color:var(--tan);max-width:70ch}

/* how: blueprint paper */
.how{background-color:var(--bp);color:var(--cream);padding:150px 0;position:relative;overflow:hidden;
  background-image:linear-gradient(var(--bp-line) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line) 1px,transparent 1px),linear-gradient(rgba(226,199,155,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(226,199,155,.06) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.plan{list-style:none;margin:80px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.plan:before{content:"";position:absolute;left:0;right:0;top:34px;border-top:2px dashed var(--tan-lt);opacity:.6}
.ps{padding:0 26px 0 0;position:relative}
.plan-line{position:absolute;left:35px;width:75%;top:34px;height:2px;pointer-events:none}
.plan-fill{position:absolute;inset:-1px 0;background:var(--hv);transform-origin:left;transform:scaleX(1)}
.plan-head{position:absolute;top:50%;left:100%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--hv);box-shadow:0 0 0 6px rgba(232,96,28,.25),0 0 24px rgba(232,96,28,.6);opacity:0}
.pn{position:relative;z-index:1;transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.ps h3,.ps p{transition:opacity .5s,transform .5s}
.js-plan .plan-fill{transform:scaleX(0)}
.js-plan .ps h3,.js-plan .ps p{opacity:.35;transform:translateY(8px)}
.js-plan .ps.lit h3,.js-plan .ps.lit p{opacity:1;transform:none}
.ps.lit .pn,.plan:not(.js-plan) .pn{background:var(--hv);color:var(--char);border-color:var(--hv);box-shadow:0 0 0 8px rgba(232,96,28,.18)}
.pn{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;border:2px solid var(--tan-lt);border-radius:50%;background:var(--bp);font:900 28px/1 var(--f-d);font-stretch:66%;color:var(--tan-lt)}
.plan h3{font-stretch:68%;font-size:34px;margin:24px 0 12px}
.plan p{color:#D8DEE6;font-size:16px}

/* faq */
.faq{background:var(--canvas);padding:150px 0}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.qs details{border-top:3px solid var(--char)}
.qs details:last-child{border-bottom:3px solid var(--char)}
.qs summary{list-style:none;cursor:pointer;padding:24px 50px 24px 0;font:900 24px/1.1 var(--f-d);font-stretch:74%;text-transform:uppercase;position:relative}
.qs summary::-webkit-details-marker{display:none}
.qs summary:after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:36px;color:var(--hv);transition:transform .3s}
.qs details[open] summary:after{transform:translateY(-50%) rotate(45deg)}
.qs details p{padding:0 0 26px;max-width:62ch;color:#3B332D}

/* final */
.final{background:var(--char);color:var(--cream);padding:150px 0;text-align:center;position:relative;overflow:hidden}
.final:before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 50% 100%,rgba(232,96,28,.22),transparent 70%)}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center}
.final .lede{margin:24px auto 44px;text-align:center}
.patch{background:var(--duck);padding:18px 30px 14px;border-radius:8px;position:relative;margin-bottom:50px;box-shadow:0 5px 0 var(--duck-dk);transform:rotate(-3deg)}
.patch:before{content:"";position:absolute;inset:6px;border:2px dashed rgba(247,241,230,.7);border-radius:5px}
.patch-w{display:block;font:900 60px/.85 var(--f-d);font-stretch:62%;text-transform:uppercase}
.patch-w em{font-style:normal;color:var(--tan-lt)}
.patch-s{display:block;font:700 11px/1 var(--f-d);letter-spacing:.3em;text-transform:uppercase;margin-top:8px}

/* footer */
.foot{background:var(--char-2);color:var(--canvas);padding:80px 0 40px;font-size:14px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-cols{display:flex;gap:70px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:10px}
.foot-cols a{text-decoration:none;color:var(--canvas);cursor:pointer}
.foot-cols a:hover{color:var(--hv)}
.fh{font:600 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin-bottom:6px}
.legal{margin-top:60px;padding-top:26px;border-top:1px solid rgba(239,228,208,.15);color:#A99C8A;font-size:12.5px;display:grid;gap:10px}
.legal a{color:#A99C8A}

/* trade pages */
.t-hero{min-height:84vh}
.t-hero .mega{font-size:clamp(58px,10vw,160px)}
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:70px}
.pain{background:var(--cream);border:3px solid var(--char);padding:30px 26px;border-radius:3px;box-shadow:6px 6px 0 var(--char)}
.pain h3{font-stretch:68%;font-size:32px;line-height:.95}
.pain p{margin-top:12px;color:#4A413A}
.pain .q{margin-top:18px;padding-top:16px;border-top:2px dashed var(--duck);font:700 17px/1.3 var(--f-d);font-stretch:85%;color:var(--duck-dk)}
.pain .q small{display:block;margin-top:8px;font:500 10.5px/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--duck)}
.crumb{font:600 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;color:var(--tan);text-decoration:none;display:inline-block;margin-bottom:26px}
.crumb:hover{color:var(--hv)}
.doc{padding:150px 0 100px}
.doc .wrap{max-width:820px}
.doc h1{font-stretch:66%;font-size:clamp(46px,7vw,90px);line-height:.9;margin-bottom:30px}
.doc h2{font-stretch:72%;font-size:28px;line-height:1;margin:40px 0 12px}
.doc p,.doc li{margin:0 0 14px;color:#3B332D}
.doc .upd{font:500 12px/1 var(--f-m);color:var(--duck);margin-top:40px}
.nav-doc{background:var(--char)}
.nav-cta{margin-left:auto}
.doc a{color:var(--duck-dk)}
.doc ul{padding-left:22px;margin:0 0 14px}
.doc strong{color:var(--char)}
.t-hero .hero-copy{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}
.t-hero .lede{max-width:52ch}
.t-pains{background:var(--canvas);padding:140px 0 120px}
.t-pains .disclaim{color:var(--duck-dk)}
.t-build{background:var(--char-2);color:var(--cream);padding:150px 0 120px;position:relative;overflow:hidden}
.t-build:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(201,162,107,.045) 0 1px,transparent 1px 64px);pointer-events:none}
.t-build .wrap{position:relative}
.t-build .layers{margin-top:70px}
.t-build .ly-x li{font-size:17px}
.t-build .layer:not(.layer-core){grid-template-columns:150px 1fr 250px}
.ptr{background:var(--canvas);padding:120px 0}
.ptr-box{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background:var(--char);color:var(--cream);border:3px solid var(--char-2);border-radius:4px;padding:44px 42px;box-shadow:10px 10px 0 var(--hv)}
.ptr-box .big{font-size:clamp(36px,4.6vw,64px)}
.ptr-nums{display:grid;gap:14px}
.ptr-nums div{display:grid;grid-template-columns:128px 1fr;column-gap:18px;align-items:center;border-bottom:2px dashed rgba(201,162,107,.3);padding-bottom:14px}
.ptr-nums div:last-child{border-bottom:0;padding-bottom:0}
.ptr-nums b{font:900 clamp(44px,4.6vw,64px)/.85 var(--f-d);font-stretch:62%;color:var(--hv)}
.ptr-nums span{font-size:15.5px;color:var(--canvas)}
.ptr-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.ptr .tm-note{margin-top:26px}
.t-why{background:var(--canvas);padding:130px 0 120px}
.t-why .stats{margin-top:70px}
.layer-core a{color:var(--tan-lt)}

/* consent banner in the house colors */
.klaro .cookie-notice:not(.cookie-modal-notice){background:var(--char-2)!important;border:2px solid var(--tan);border-radius:4px!important;font-family:var(--f-b)}
/* The cookie choice sits above the chat button and the audit tab until it is made (Chris 2026-10-26: the chat button covered Accept). */
.klaro .cookie-notice:not(.cookie-modal-notice){z-index:2147483646!important}
.klaro .cookie-modal{z-index:2147483647!important}
.klaro .cookie-notice .cm-btn.cm-btn-success,.klaro .cookie-modal .cm-btn.cm-btn-success{background:var(--hv)!important;color:var(--char)!important;font-weight:700}
.klaro .cookie-notice .cm-btn,.klaro .cookie-modal .cm-btn{border-radius:2px!important}
.klaro .cookie-notice a,.klaro .cookie-modal a{color:var(--tan)!important}
.klaro .cookie-modal .cm-modal.cm-klaro{background:var(--char-2)!important}

/* motion off: everything visible and still */
.no-motion .tape-track{animation:none}

/* responsive */
@media (max-width:1060px){
  .track{grid-template-columns:repeat(2,1fr)}
  .menu{display:none}.burger{display:block}.nav .btn-sm{display:none}
  .nav .nav-cta{display:inline-flex}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{justify-self:center;max-width:520px;margin-top:76px}
  .proof-grid,.faq-grid{grid-template-columns:1fr;gap:50px}
  .stack-grid{grid-template-columns:1fr;gap:30px}.more{grid-column:1}.tally{grid-row:auto;position:sticky;top:64px;z-index:5;background:var(--char-2);display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center}.tally-n{grid-row:1/4;grid-column:1;font-size:90px;margin:0}
  .bench-grid{grid-template-columns:1fr;gap:34px}
  .twin{grid-template-columns:1fr;gap:40px;margin-top:90px;padding-top:60px}
  .price-grid{grid-template-columns:1fr;gap:40px}
  .proof-pin{position:static}
  .board{grid-template-columns:repeat(2,1fr)}
  .ways-grid,.pains{grid-template-columns:1fr}
  .ptr-box{grid-template-columns:1fr;padding:34px 28px}
  .plan{grid-template-columns:repeat(2,1fr);row-gap:50px}
  .plan:before,.plan-line{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:3px solid var(--char)}
}
@media (max-width:760px){
  body{font-size:16px}
  .hero{padding-top:120px}
  .tag{padding:6px 8px 5px}.tag b{font-size:15px}.tag i{display:none}
  .hero-art{aspect-ratio:1/1.25}
  .tag .ph{width:54px;height:54px;margin:0 0 5px -27px;border-width:2px;box-shadow:0 0 0 2px var(--tan),3px 3px 0 rgba(0,0,0,.35)}
  .hero .t7{top:13%}.hero .t1{left:23%}.hero .t1,.hero .t2{top:32%}.hero .t3,.hero .t4{top:57%}.hero .t5,.hero .t6{top:80%}.hero .t8{top:94%}
  .hero-art{margin-top:56px}
  .art-note{bottom:-58px}.art-play{bottom:-32px}
  .hero-art{margin-bottom:40px}
  .core-w{font-size:32px}.core{padding:12px 14px 10px}
  .track{grid-template-columns:1fr}
  .card{min-height:0}
  .card h3{padding-top:30px;font-size:38px}
  .stamp{position:static;align-self:flex-start;margin-bottom:22px;font-size:40px}
  .board{grid-template-columns:1fr}
  .layer,.layer-core,.t-build .layer:not(.layer-core){grid-template-columns:1fr;gap:12px}
  .cb{grid-template-columns:1fr 84px;row-gap:6px}.cb-l{grid-column:1/-1}.calc{padding:26px 20px}#calc-in{font-size:52px}
  .pr-rule{padding:20px}
  .tw-node{padding:6px 8px 5px}.tw-node b{font-size:14px}.tw-node i{display:none}
  .ly-r{border-left:0;border-top:2px dashed rgba(38,34,31,.25);padding:14px 0 0}
  .note{transform:none!important}
  .case-body{grid-template-columns:1fr}
  .case-nums{grid-template-columns:1fr}
  .case-nums div{border-bottom:2px solid rgba(26,23,21,.4)}
  .plan{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0!important;border-bottom:3px solid var(--char)}
  .stat:last-child{border-bottom:0}
  .step{padding-left:30px;padding-bottom:60px}
  .patch-w{font-size:44px}
  .btn{padding:16px 20px}
  .btn-lg{padding:20px 24px;font-size:16px}
  .t-pains,.t-build{padding:100px 0 90px}
  .ptr{padding:90px 0}
  .ptr-box{padding:28px 20px;box-shadow:6px 6px 0 var(--hv)}
  .ptr-nums div{grid-template-columns:96px 1fr;column-gap:12px}
  .t-why{padding:100px 0 90px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .tape-track{animation:none}
  .tw-ring{animation:none}.tw-pulses{display:none}
}

/* "I'd like to know more" floating tab and form (js/tm-lead.js). Bottom-left on desktop: the chat bubble takes bottom-right at go-live. */
.tml-tab{position:fixed;left:20px;bottom:20px;z-index:110;display:flex;align-items:stretch;border-radius:999px;background:var(--hv);box-shadow:0 10px 30px rgba(0,0,0,.32);border:2px solid var(--char)}
.tml-open{display:flex;align-items:center;gap:10px;background:none;border:0;color:var(--char);font:800 16px/1 var(--f-d);text-transform:uppercase;letter-spacing:.04em;padding:17px 8px 17px 22px;cursor:pointer}
.tml-dot{width:9px;height:9px;border-radius:50%;background:var(--char);box-shadow:0 0 0 4px rgba(38,34,31,.18)}
.tml-x{background:none;border:0;color:var(--char);font:400 22px/1 var(--f-b);padding:0 16px 0 8px;cursor:pointer}
.tml-tab:hover{background:var(--hv-dk)}
.tml-panel{position:fixed;inset:0;z-index:130;background:rgba(26,23,21,.62);display:flex;align-items:flex-end;justify-content:flex-start;padding:20px}
.tml-panel[hidden]{display:none}
.tml-lock,.tml-lock body{overflow:hidden}
.tml-card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow:auto;background:var(--cream);color:var(--char);border-radius:10px;padding:26px 24px 22px;border-top:5px solid var(--hv);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.tml-close{position:absolute;top:10px;right:12px;background:none;border:0;font:400 28px/1 var(--f-b);color:var(--duck);cursor:pointer;padding:4px 8px}
.tml-k{font:500 11px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--duck);margin:0 0 8px}
.tml-card h2{font-size:30px;line-height:1;margin:0 0 8px}
.tml-sub{font-size:15px;line-height:1.5;color:#4a423b;margin:0 0 16px}
.tml-form{display:grid;gap:11px}
.tml-form label{display:grid;gap:5px;font:600 13px/1.2 var(--f-b);color:var(--char)}
.tml-form label i{font-weight:400;font-style:normal;color:#7a6e62}
.tml-form input,.tml-form select{font:400 16px/1.3 var(--f-b);color:var(--char);background:#fff;border:1px solid #cdbfa8;border-radius:6px;padding:11px 12px;width:100%}
.tml-form input:focus,.tml-form select:focus{outline:2px solid var(--hv);outline-offset:1px;border-color:var(--hv)}
.tml-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.tml-send{margin-top:4px;background:var(--hv);color:var(--char);border:0;border-radius:6px;font:800 16px/1 var(--f-d);text-transform:uppercase;letter-spacing:.04em;padding:16px 18px;cursor:pointer}
.tml-send:hover{background:var(--hv-dk)}.tml-send:disabled{opacity:.6;cursor:default}
.tml-fine{font-size:12px;line-height:1.45;color:#6b6056;margin:0}
.tml-fine a{color:var(--duck)}
.tml-msg{font-size:14px;margin:0;min-height:1em}.tml-err{color:#b23a0c;font-weight:600}
.tml-done{font-size:16px;line-height:1.55;margin:6px 0 0}.tml-done a{color:var(--hv-dk);font-weight:700}
@media (max-width:640px){
  .tml-tab{left:12px;right:88px;bottom:16px;justify-content:space-between} /* leaves room for the chat button, bottom-right */
  .tml-open{flex:1;justify-content:center;padding:15px 6px 15px 14px;font-size:14px;white-space:nowrap}
  .tml-x{padding:0 14px 0 4px}
  .tml-panel{padding:0;align-items:flex-end}
  .tml-card{max-width:none;border-radius:14px 14px 0 0;max-height:92vh;padding:24px 18px 20px}
}
@media print{.tml-tab,.tml-panel{display:none!important}}

/* Chat widget (mg-voice, js/tm-chat.js) in TradeMade colors */
:root{--mgv-primary-color:#E8601C;--mgv-primary-text-color:#26221F;--mgv-focus-color:#E8601C;--mgv-font-family:"Public Sans",system-ui,sans-serif;--mgv-radius:10px}


/* Competitor comparison pages (/<tool>-alternative) */
.cmp{background:var(--cream);padding:120px 0}
.cmp-math{background:var(--canvas);padding-top:0}
.cmp-t{margin-top:56px;border:3px solid var(--char);border-radius:3px;box-shadow:6px 6px 0 var(--char);background:#fff}
.cmp-r{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;border-top:1px solid rgba(38,34,31,.15)}
.cmp-r span{padding:14px 18px;font-size:16px;line-height:1.45}
.cmp-r span+span{border-left:1px solid rgba(38,34,31,.15)}
.cmp-h{border-top:0;background:var(--char);color:var(--cream)}
.cmp-h span{font:700 12px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.cmp-h span:last-child{color:var(--hv)}
.cmp-r .y{font-weight:600}
.cmp-r .n{color:#8A7F74}
.cmp-r span:last-child{background:rgba(232,96,28,.06)}
.cmp-h span:last-child{background:transparent}
.math{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.math div{background:var(--cream);border:3px solid var(--char);border-radius:3px;padding:26px;box-shadow:6px 6px 0 var(--char)}
.math div:last-child{border-color:var(--hv);box-shadow:6px 6px 0 var(--hv)}
.math span{display:block;font:700 12px/1.3 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--duck-dk)}
.math b{display:block;font:900 clamp(40px,5vw,64px)/1 var(--f-d);margin:10px 0 8px}
.math small{font-size:15px;color:#4A413A}
@media (max-width:760px){
  .cmp{padding:80px 0}
  .cmp-r{grid-template-columns:1fr 1fr}
  .cmp-r span:first-child{grid-column:1/-1;font-weight:700;padding-bottom:4px;border-left:0}
  .cmp-r span:nth-child(2){border-left:0}
  .cmp-h span:first-child{display:none}
  .math{grid-template-columns:1fr}
}
.cmp .disclaim{color:var(--duck-dk)}
.cmp .disclaim,.t-pains .disclaim{max-width:none}
.tm-note{max-width:none}
.cost{background:var(--canvas);padding:110px 0 40px}
.cost-l{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cost-l li{background:var(--cream);border:3px solid var(--char);border-radius:3px;padding:22px 22px 18px;box-shadow:6px 6px 0 var(--char)}
.cost-l b{display:block;font:900 clamp(30px,3.4vw,44px)/1 var(--f-d);margin-bottom:10px}
.cost-l span{display:block;font-size:16px;line-height:1.45}
.cost-l small{display:block;margin-top:10px;font:600 11.5px/1.4 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:var(--duck-dk)}
.cost .disclaim{max-width:none}
@media (max-width:760px){.cost{padding:80px 0 30px}}
.cost-l b{font-size:clamp(26px,2.5vw,36px);overflow-wrap:anywhere}
.cost .disclaim{color:var(--duck-dk)}

/* ---------- Relaunch 2026-10-26: tool picker, "the system does the work", comparison links ---------- */
.pick{margin-top:34px;max-width:620px}
.pick-k{font:600 12px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--tan-lt);margin:0 0 12px}
.pick-x{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pick-x a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border:1.5px solid rgba(201,162,107,.55);border-radius:3px;color:var(--cream);font:800 15px/1 var(--f-d);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.pick-x a:hover,.pick-x a:focus-visible{background:var(--hv);border-color:var(--hv);color:var(--char)}
.pick-n{margin-top:12px;font:500 13px/1.5 var(--f-m);color:var(--tan)}
a[data-cmp][target="_blank"]:after{content:"\2197";font:600 .85em/1 var(--f-m);margin-left:4px;opacity:.75}
.ly-x a{color:inherit;text-decoration:none;border-bottom:2px solid var(--hv);padding-bottom:1px;transition:color .2s}
.ly-x a:hover,.ly-x a:focus-visible{color:var(--hv-dk)}
.work{background:var(--cream);padding:140px 0 120px}
.work-grid{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;gap:56px;margin-top:64px;align-items:start}
.work-stat{border-top:3px solid var(--char);padding-top:26px}
.work-stat b{display:block;font:900 clamp(96px,11vw,170px)/.82 var(--f-d);font-stretch:62%;color:var(--hv)}
.work-stat p{margin-top:18px;font-size:18px;line-height:1.45;color:var(--char);max-width:34ch}
.work-stat small{display:block;margin-top:14px;font:500 12px/1.5 var(--f-m);color:var(--duck-dk)}
.work-x{list-style:none;margin:0;padding:0;display:grid;gap:0}
.work-x li{border-top:2px solid rgba(38,34,31,.18);padding:24px 0}
.work-x li:last-child{border-bottom:2px solid rgba(38,34,31,.18)}
.work-x h3{font:900 26px/1 var(--f-d);font-stretch:70%;text-transform:uppercase;color:var(--char)}
.work-x p{margin-top:10px;color:#4A413A;max-width:60ch}
.calc-big{margin-top:10px;font:600 14px/1.5 var(--f-m);color:var(--tan)}
@media (max-width:760px){
  .work{padding:80px 0 70px}
  .work-grid{grid-template-columns:1fr;gap:36px;margin-top:40px}
  .pick-x a{padding:9px 12px;font-size:14px}
}
.calc-min{margin-top:10px;font:500 13px/1.5 var(--f-m);color:var(--canvas)}
html{overflow-x:clip}
@media (max-width:760px){.steps{min-width:0}.step{padding-left:24px}.step h3,.step p{overflow-wrap:break-word}}
.ai-x{max-width:860px;margin-top:48px}
.stack .work-x li{border-color:rgba(247,241,230,.18)}
.stack .work-x h3{color:var(--cream)}
.stack .work-x p{color:var(--canvas)}
.ai-safe{background:var(--canvas)}
.cmp-group + .cmp-group{margin-top:64px}
.cmp-group .eyebrow{margin-bottom:26px}
a.card[data-cmp]:after{content:none}
.pick-x a.pick-all{border-style:dashed;color:var(--tan-lt)}
.pick-x a.pick-all:after{content:"\2192";margin-left:2px}

/* ---------- Free software audit (/audit) and the confidentiality commitment (2026-10-26) ---------- */
.aud{background:var(--cream);padding:90px 0 120px}
.aud-form,.aud-done{max-width:860px}
.aud-progress{list-style:none;display:flex;gap:6px;margin:0 0 34px;padding:0}
.aud-progress li{flex:1;height:6px;background:rgba(38,34,31,.14);border-radius:3px}
.aud-progress li.done{background:var(--duck)}
.aud-progress li.on{background:var(--hv)}
.aud-step{border:0;margin:0;padding:0;min-width:0}
.aud-step legend{font:900 clamp(30px,3.6vw,46px)/1 var(--f-d);font-stretch:66%;text-transform:uppercase;color:var(--char);padding:0;margin-bottom:22px}
.aud-n{display:block;font:600 12px/1 var(--f-m);letter-spacing:.14em;color:var(--duck);margin-bottom:12px}
.aud-help{font:500 14px/1.5 var(--f-m);color:var(--duck-dk);margin:-8px 0 18px}
.aud-pills{display:flex;flex-wrap:wrap;gap:10px}
.aud-pill input{position:absolute;opacity:0;width:1px;height:1px}
.aud-pill span{display:inline-block;padding:11px 15px;border:2px solid var(--char);border-radius:3px;font:700 15px/1.1 var(--f-b);color:var(--char);background:#fff;cursor:pointer;transition:background .15s,color .15s}
.aud-pill input:checked + span{background:var(--char);color:var(--cream)}
.aud-pill input:focus-visible + span{outline:3px solid var(--hv);outline-offset:2px}
.aud-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aud-num span{display:block;font:600 13px/1.3 var(--f-m);color:var(--char);margin-bottom:6px}
.aud-num input,.aud-line input,.aud-line textarea{width:100%;box-sizing:border-box;font:500 18px/1.3 var(--f-b);padding:12px 14px;border:2px solid var(--char);border-radius:3px;background:#fff;color:var(--char)}
.aud-line{display:block;margin-top:18px;font:600 14px/1.3 var(--f-m);color:var(--char)}
.aud-line input,.aud-line textarea{margin-top:6px}
.aud-line i{font-style:normal;color:var(--duck-dk);font-weight:500}
.aud-money{display:flex;align-items:center;gap:10px}
.aud-money input{max-width:260px;margin-top:0}
.aud-contact{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.aud-check{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:14.5px;line-height:1.45;color:#3B332D;cursor:pointer}
.aud-check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--hv)}
.aud-hp{position:absolute;left:-9999px}
.aud-trust{margin-top:24px;padding:18px 20px;border:2px dashed var(--duck);border-radius:3px;background:rgba(201,162,107,.12);font-size:15px;line-height:1.5;color:var(--char)}
.aud-trust b{display:block;font:900 20px/1.1 var(--f-d);font-stretch:70%;text-transform:uppercase;margin-bottom:6px}
.aud-nav{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.aud-msg{margin-top:16px;font:600 14px/1.4 var(--f-m);color:var(--duck-dk)}
.aud-msg.aud-err{color:#B3261E}
.aud-done .btn{margin-top:28px}
.aud-done .aud-help{margin-top:14px}
.aud-fig{margin:28px 0 30px}
.aud-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.aud-stats div{background:var(--cream);border:2px solid var(--char);border-radius:3px;padding:14px 16px}
.aud-stats dt{font:600 11.5px/1.3 var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--duck-dk)}
.aud-stats dd{margin:8px 0 0;font:900 30px/1 var(--f-d);font-stretch:75%;color:var(--char);overflow-wrap:anywhere}
.aud-first{margin:18px 0 0;font-size:16px;color:var(--char)}
.aud-chart{margin:24px 0 0;position:relative}
.aud-chart figcaption{font:600 13px/1.3 var(--f-m);color:var(--char)}
.aud-legend{list-style:none;display:flex;gap:18px;margin:10px 0 6px;padding:0;font:500 13px/1.3 var(--f-m);color:#3B332D}
.aud-legend li::before{content:"";display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:7px;vertical-align:middle}
.aud-lg-today::before{background:#2F6DB0}.aud-lg-tm::before{background:#D2541A}
.aud-keys{margin:0 0 6px;font:500 12px/1.4 var(--f-m);color:#6B5F52}
.aud-plot svg:focus-visible{outline:3px solid var(--hv);outline-offset:3px}
.aud-plot svg{display:block;width:100%;height:auto;touch-action:pan-y}
.aud-tip{position:absolute;pointer-events:none;background:var(--char);color:var(--cream);font:500 12.5px/1.45 var(--f-m);padding:8px 10px;border-radius:3px;white-space:nowrap;transform:translate(-50%,-100%)}
.aud-note{margin:12px 0 0;font:500 12px/1.55 var(--f-m);color:#6B5F52}
.aud-help b{color:var(--char)}
.aud-auto-list{display:grid;gap:0}
.aud-auto{display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:center;padding:12px 0;border-top:2px solid rgba(38,34,31,.12)}
.aud-auto:first-child{border-top:0}
.aud-auto-q{margin:0;font:600 16px/1.35 var(--f-b);color:var(--char)}
.aud-yn{display:flex;gap:8px}
.aud-yn .aud-pill span{min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:6px 12px;font-size:14px;line-height:1.1;text-align:center}
.aud-head{margin:26px 0 22px}
.aud-head-n{margin:0;font:900 clamp(56px,9vw,104px)/.9 var(--f-d);font-stretch:66%;color:var(--hv-dk);overflow-wrap:anywhere}
.aud-head-k{margin:6px 0 0;font:700 clamp(18px,2vw,22px)/1.3 var(--f-b);color:var(--char)}
.aud-gaps{margin:8px 0 28px;padding:20px 22px;background:var(--cream);border:2px solid var(--char);border-radius:3px}
.aud-gaps h3{font:900 24px/1.05 var(--f-d);font-stretch:70%;text-transform:uppercase;color:var(--char);margin:0 0 12px}
.aud-gaps ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.aud-gaps li{position:relative;padding-left:20px;font-size:16px;line-height:1.4;color:#3B332D}
.aud-gaps li:before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;background:var(--hv);transform:rotate(45deg)}
@media (max-width:640px){.aud-auto{grid-template-columns:1fr}.aud-yn .aud-pill{flex:1;display:flex}.aud-yn .aud-pill span{flex:1}}
@media (max-width:720px){.aud-stats dd{font-size:24px}}
@media (max-width:480px){.aud-stats{gap:8px}.aud-stats div{padding:10px}.aud-stats dt{font-size:10px;letter-spacing:.04em}.aud-stats dd{font-size:19px}}
.conf-x{list-style:none;margin:48px 0 0;padding:0;max-width:860px;counter-reset:c}
.conf-x li{border-top:2px solid rgba(38,34,31,.18);padding:22px 0;counter-increment:c}
.conf-x h3{font:900 24px/1 var(--f-d);font-stretch:70%;text-transform:uppercase;color:var(--char)}
.conf-x h3:before{content:counter(c) ". ";color:var(--hv)}
.conf-x p{margin-top:10px;color:#3B332D;max-width:70ch}
@media (max-width:760px){
  .aud{padding:60px 0 80px}
  .aud-nums{grid-template-columns:1fr 1fr}
  .aud-contact{grid-template-columns:1fr}
  .aud-nav .btn{flex:1}
}
a.tml-open{text-decoration:none}
.aud [hidden]{display:none!important}
.aud .btn-line{color:var(--char);border-color:var(--char)}
.aud .btn-line:hover{background:var(--char);color:var(--cream)}

/* left-hand menu (tools/tm-sidebar.py writes it into every page; Chris 2026-10-26) */
:root{--side:252px;--side-c:64px}
.side{position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:110;background:var(--char-2);color:var(--cream);display:flex;flex-direction:column;padding:84px 0 16px;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid rgba(226,199,155,.14);transition:width .25s,transform .3s}
.side-n{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.side a,.side summary{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:4px;color:var(--canvas);text-decoration:none;font:600 13px/1.25 var(--f-m);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none}
.side summary::-webkit-details-marker{display:none}
.side summary:after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border-right:2px solid var(--tan);border-bottom:2px solid var(--tan);transform:rotate(-45deg);transition:transform .2s}
.side details[open]>summary:after{transform:rotate(45deg)}
.side a:hover,.side summary:hover{background:rgba(239,228,208,.08)}
.side a[aria-current=page]{background:rgba(232,96,28,.16);color:var(--cream);box-shadow:inset 3px 0 0 var(--hv)}
.side ul{list-style:none;margin:0 0 4px;padding:0 0 0 32px}
.side ul a{font:500 14px/1.3 var(--f-b);text-transform:none;letter-spacing:0;padding:6px 10px;color:var(--tan-lt)}
.side .side-sg>summary{font:600 11px/1.3 var(--f-m);letter-spacing:.08em;color:var(--tan);padding:7px 10px}
.side .side-sg ul{padding-left:10px}
.side-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side a.side-cta{margin-top:10px;color:var(--hv);box-shadow:inset 0 0 0 2px var(--hv)}
.side a.side-cta[aria-current=page]{background:rgba(232,96,28,.16)}
.side-x{margin:14px 10px 0;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--tan);font:600 12px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;padding:10px;cursor:pointer;border-radius:4px}
.side-x:hover{background:rgba(239,228,208,.08)}
.side-x-i{width:20px;height:20px;flex:none;position:relative}
.side-x-i:before{content:"";position:absolute;left:7px;top:6px;width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.side-scrim{position:fixed;inset:0;z-index:99;background:rgba(10,9,8,.55)}
.side-scrim[hidden]{display:none}
@media (min-width:1181px){
  body{padding-left:var(--side);transition:padding-left .25s}
  .nav{left:var(--side);transition:background .3s,padding .3s,transform .35s,left .25s}
  .side-c body{padding-left:var(--side-c)}
  .side-c .nav{left:var(--side-c)}
  .side-c .side{width:var(--side-c)}
  .side-c .side ul,.side-c .side summary:after{display:none}
  .side-c .side .side-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .side-c .side a,.side-c .side summary,.side-c .side-x{justify-content:center;padding:10px 0}
  .side-c .side a.side-cta{box-shadow:none}
  .side-c .side-x-i:before{transform:rotate(-135deg);left:4px}
  .nav .burger{display:none}
  .side-scrim{display:none!important}
}
@media (max-width:1180px){
  html:not(.js) .side{position:static;width:auto;padding:90px 0 10px;border-right:0}
  html:not(.js) .nav .burger,html:not(.js) .side-x{display:none}
  .js .side{width:min(320px,86vw);padding-top:20px;transform:translateX(-102%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  .js .side.open{transform:none;visibility:visible;transition:transform .3s}
  .side-x{display:none}
  .nav .burger{display:block;margin-left:6px}
  .nav .nav-cta{display:inline-flex}
}
@media print{.side,.side-scrim{display:none!important}body{padding-left:0!important}}
@media (min-width:1181px){.tml-tab{display:none}}
.side-open .tml-tab{display:none}

/* Homepage video (2026-10-27): click to play with sound, captions burned in, loaded only on play */
.watch{background:var(--char);color:var(--cream);padding:90px 0 100px}
.watch .eyebrow{color:var(--tan-lt)}
.tv{margin:0;max-width:1000px}
.tv-frame{position:relative;border-radius:var(--r);overflow:hidden;border:3px solid #000;box-shadow:14px 14px 0 var(--hv);background:var(--char-2);aspect-ratio:16/9}
.tv video{display:block;width:100%;height:100%;object-fit:cover;background:var(--char-2)}
.tv-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:0;cursor:pointer;color:var(--cream);font:inherit;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(26,23,21,.7) 0%,rgba(26,23,21,.4) 60%,rgba(26,23,21,.15) 100%)}
.tv-play[hidden]{display:none}
.tv-btn{width:92px;height:92px;border-radius:50%;background:var(--hv);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(232,96,28,.22),0 20px 40px rgba(0,0,0,.45);transition:transform .25s}
.tv-btn svg{width:40px;height:40px;fill:var(--cream);margin-left:6px}
.tv-play:hover .tv-btn,.tv-play:focus-visible .tv-btn{transform:scale(1.08)}
.tv-play:focus-visible{outline:3px solid var(--hv);outline-offset:-3px}
.tv-label{font:900 clamp(20px,2.4vw,30px)/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.tv-label small{display:block;margin-top:8px;font:400 13px/1.2 var(--f-m);letter-spacing:.12em;color:var(--tan-lt)}
.tv-tx{margin-top:22px;color:var(--tan-lt);font-size:16px;line-height:1.65;max-width:760px}
.tv-tx summary{cursor:pointer;font:500 13px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;list-style:none}
.tv-tx summary::-webkit-details-marker{display:none}
.tv-tx summary::after{content:" +";color:var(--hv)}
.tv-tx[open] summary::after{content:" \2212"}
.tv-tx p{margin:12px 0 0;color:var(--cream)}
@media (max-width:640px){.watch{padding:60px 0 70px}.tv-frame{box-shadow:8px 8px 0 var(--hv)}.tv-btn{width:66px;height:66px}.tv-btn svg{width:28px;height:28px}.tv-play{gap:12px}}

/* Wide homepage hero (1061px and up): the copy stacks centered on top and the rig runs full width beneath it,
   with the second web of capabilities around the people wherever the rig has room for it. */
/* The second web shows only when the rig is wide enough for every label (set in js/trademade.js). */
.hero-home .sats,.hero-home .sat-lines{display:none}
@media (min-width:1061px){.hero-home .rig-web .sats{display:block}.hero-home .rig-web .sat-lines{display:inline}}
@media (min-width:1061px){
  .hero-home .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-home .hero-copy{max-width:900px;margin:0 auto;text-align:center}
  .hero-home .hero-copy .eyebrow{justify-content:center}
  .hero-home .hero-copy .mega{font-size:clamp(64px,6.6vw,112px)}
  .hero-home .hero-copy .lede{margin-left:auto;margin-right:auto;max-width:52ch}
  .hero-home .hero-copy .cta-row{justify-content:center}
  .hero-home .hero-copy .hero-note{margin-left:auto;margin-right:auto}
  .hero-home .hero-copy .pick{margin-left:auto;margin-right:auto;max-width:760px}
  .hero-home .hero-copy .pick-x{justify-content:center}
  .hero-home .hero-art{aspect-ratio:1240/980;max-width:1240px;width:100%;justify-self:center;margin-top:110px}
  .hero-home .t7{left:50%;top:25%}
  .hero-home .t1{left:30%;top:35%}.hero-home .t2{left:70%;top:35%}
  .hero-home .t3{left:26%;top:58%}.hero-home .t4{left:74%;top:58%}
  .hero-home .t5{left:30%;top:81%}.hero-home .t6{left:70%;top:81%}
  .hero-home .t8{left:50%;top:83%}
  .hero-home .tag .ph{width:96px;height:96px;margin:0 0 6px -48px}
  .hero-home .art-note{bottom:-46px}.hero-home .art-play{bottom:-52px}
}

/* Agent to agent: a visitor's own AI is invited to check TradeMade for them, from /agent. */
.a2a{background:var(--canvas);color:var(--char);padding:100px 0 110px;border-top:3px solid var(--char-2)}
.a2a-h{font:900 clamp(44px,5.4vw,84px)/.9 var(--f-d);font-stretch:62%;text-transform:uppercase;max-width:16ch}
.a2a-lede{font-size:clamp(17px,1.5vw,20px);max-width:58ch;margin-top:22px;color:var(--char)}
.a2a-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;margin-top:44px;align-items:stretch}
.a2a-alex{display:flex;gap:18px;align-items:flex-start;background:var(--cream);border:2px solid var(--char-2);box-shadow:6px 6px 0 var(--char-2);padding:24px}
.a2a-alex img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--char-2);box-shadow:0 0 0 3px var(--tan);flex:none}
.a2a-name{font:800 18px/1.2 var(--f-d);text-transform:uppercase;margin:0}
.a2a-on{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font:600 11px/1 var(--f-m);text-transform:none;color:var(--duck-dk)}
.a2a-say{margin:10px 0 0;font-size:17px;line-height:1.5}
.a2a-demo{background:var(--char-2);color:var(--cream);border:2px solid var(--char-2);box-shadow:6px 6px 0 var(--hv);padding:22px 24px}
.a2a-tabs{display:flex;gap:8px;margin-bottom:14px}
.a2a-tab{background:none;border:1.5px solid rgba(201,162,107,.5);color:var(--tan-lt);font:700 12px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;cursor:pointer}
.a2a-tab.is-on{background:var(--hv);border-color:var(--hv);color:var(--char)}
.a2a-k{font:600 11px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--tan);margin:0 0 10px}
.a2a-msg{font-size:15px;line-height:1.5;padding:12px 14px;margin-top:10px;border-radius:2px}
.a2a-msg b{display:block;font:600 11px/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.a2a-you{background:rgba(247,241,230,.08);border-left:3px solid var(--tan)}.a2a-you b{color:var(--tan-lt)}
.a2a-them{background:rgba(232,96,28,.12);border-left:3px solid var(--hv)}.a2a-them b{color:var(--hv)}
.a2a-k2{margin-top:44px;color:var(--duck-dk)}
.a2a-copy{display:flex;align-items:center;gap:14px;background:var(--cream);border:2px dashed var(--char-2);padding:14px 14px 14px 20px;max-width:880px}
.a2a-copy code{flex:1;font:500 15px/1.45 var(--f-m);color:var(--char)}
.a2a-alt{margin-top:16px;font:500 14px/1.5 var(--f-m);color:var(--duck-dk)}
.a2a-alt a{color:var(--char);text-decoration:underline;text-underline-offset:3px}
.a2a-split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:50px;border-top:2px solid var(--char-2);padding-top:30px}
.a2a-sk{font:800 20px/1 var(--f-d);text-transform:uppercase;margin:0 0 12px}
.a2a-split ul{margin:0;padding-left:18px;line-height:1.8}
@media (max-width:860px){.a2a{padding:70px 0 80px}.a2a-grid,.a2a-split{grid-template-columns:1fr}.a2a-copy{flex-direction:column;align-items:stretch}.a2a-copy .btn{align-self:flex-start}}

/* /agent: a plain, readable page for AI assistants and the owners they work for. */
.agent-doc{background:var(--cream);color:var(--char);padding:70px 0 100px}
.agent-wrap{max-width:820px}
.agent-doc h2{font:900 clamp(28px,3vw,40px)/1 var(--f-d);font-stretch:68%;text-transform:uppercase;margin:48px 0 14px}
.agent-doc h2:first-child{margin-top:0}
.agent-doc p,.agent-doc li{font-size:17px;line-height:1.65}
.agent-doc ol,.agent-doc ul{padding-left:22px;margin:0}
.agent-doc li{margin:6px 0}
.agent-doc a{color:var(--duck-dk);text-decoration:underline;text-underline-offset:3px}
.agent-fine{margin-top:40px;font:500 13px/1.6 var(--f-m);color:var(--duck-dk)}