/* ByTrades site styles. Built 5 Nov 2026. */

html #bt{opacity:1!important;animation:none!important}

#bt{margin:0;background:#F5F0E6}#bt a{color:#141414}#bt a:hover{color:#2B2B2B}#bt *{box-sizing:border-box}#bt .d{font-family:'Bricolage Grotesque','Arial Narrow',Arial,sans-serif;font-weight:800;font-stretch:78%;letter-spacing:-0.015em;line-height:1}#bt .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#bt .btn{background:#C6F24E;color:#141414;border:0;box-shadow:0 1px 2px rgba(20,20,20,.2),0 6px 14px -8px rgba(20,20,20,.35);font:700 16px/1 'Instrument Sans',Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:6px;white-space:nowrap}#bt .btn:hover{background:#D3F76C;color:#141414}#bt .btn:focus-visible,#bt .ghost:focus-visible,#bt .seg:focus-visible,#bt input:focus-visible{outline:3px solid #141414;outline-offset:2px}#bt .dark .btn:focus-visible,#bt .dark input:focus-visible{outline-color:#C6F24E}#bt .ghost{display:flex;align-items:center;justify-content:center;min-height:48px;background:#FFFDF8;border:1px solid #DDD6C8;box-shadow:0 1px 2px rgba(20,20,20,.06);border-radius:6px;font-weight:700;font-size:15px;text-decoration:none;color:#141414}#bt .ghost:hover{background:#141414;color:#F5F0E6}#bt .nl{font-weight:500;font-size:15px;text-decoration:none;color:#141414;padding:12px 0}#bt .nl:hover{text-decoration:underline;text-underline-offset:4px}#bt .seg{border:0;background:transparent;color:#141414;font:600 15px/1 'Instrument Sans',Arial,sans-serif;min-height:44px;padding:0 16px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}#bt .seg.on{background:#141414;color:#F5F0E6}#bt .tag{font-size:11px;font-weight:700;padding:4px 7px;border-radius:4px;background:#2B2B2B;color:#F5F0E6}#bt .seg.on .tag{background:#C6F24E;color:#141414}#bt .spin{transform:translate(-50%,-50%) rotate(-3deg);animation:rot 16s infinite cubic-bezier(.6,0,.3,1)}#bt .p0{z-index:4;animation-delay:0s}#bt .p1{z-index:3;transform:translate(-34%,-58%) rotate(4deg) scale(.96);animation-delay:-12s}#bt .p2{z-index:2;transform:translate(-66%,-60%) rotate(-8deg) scale(.92);animation-delay:-8s}#bt .p3{z-index:1;transform:translate(-50%,-72%) rotate(9deg) scale(.88);animation-delay:-4s}
@keyframes rot{
0%,20%{transform:translate(-50%,-50%) rotate(-3deg) scale(1);z-index:4}
23%{transform:translate(-88%,-52%) rotate(-13deg) scale(.96);z-index:4}
25%,45%{transform:translate(-50%,-72%) rotate(9deg) scale(.88);z-index:1}
50%,70%{transform:translate(-66%,-60%) rotate(-8deg) scale(.92);z-index:2}
75%,95%{transform:translate(-34%,-58%) rotate(4deg) scale(.96);z-index:3}
100%{transform:translate(-50%,-50%) rotate(-3deg) scale(1);z-index:4}
}
@media (prefers-reduced-motion:reduce){#bt .spin{animation:none}}#bt .t-build{--bg:#A8321F;--ink:#FFF3E4;--acc:#FFF3E4;--on:#A8321F;--a2:#C4553B;--line:#7E2213;--f:'Alfa Slab One',Georgia,serif}#bt .t-plaster{--bg:#DCE6EE;--ink:#16324F;--acc:#16324F;--on:#FFFFFF;--a2:#B8CCDD;--line:#8FADC6;--f:'Fraunces',Georgia,serif}#bt .t-garden{--bg:#1E4D38;--ink:#F1E9D2;--acc:#E9B44C;--on:#1E2B1F;--a2:#2F6B4E;--line:#4C8C68;--f:'Young Serif',Georgia,serif}#bt .t-elec{--bg:#F6C026;--ink:#141414;--acc:#141414;--on:#F6C026;--a2:#141414;--line:#F6C026;--f:'Archivo Black',Arial,sans-serif}#bt .t-plumb{--bg:#0F6E78;--ink:#EAFBF9;--acc:#FF7A45;--on:#141414;--a2:#15899A;--line:#5BC2C8;--f:'Space Grotesk',Arial,sans-serif}#bt .t-decor{--bg:#F3C6CF;--ink:#4A1730;--acc:#4A1730;--on:#F3C6CF;--a2:#E89AAC;--line:#C94F72;--f:'Abril Fatface',Georgia,serif}#bt .sf{font-family:var(--f);font-weight:400;line-height:1.05}#bt .lift{background:#FBF8F1;border:1px solid #DDD6C8;box-shadow:0 1px 2px rgba(20,20,20,.05),0 10px 24px -14px rgba(20,20,20,.18)}#bt .plan{background:#FBF8F1;border:1px solid #DDD6C8;box-shadow:0 1px 2px rgba(20,20,20,.05),0 10px 24px -14px rgba(20,20,20,.18)}#bt .plan.top{background:#141414;color:#F5F0E6;border-color:#141414;box-shadow:0 2px 4px rgba(20,20,20,.14),0 18px 36px -14px rgba(20,20,20,.4)}#bt .plan .rule{border-top:1px solid #DDD6C8}#bt .plan.top .rule{border-top-color:#3A3A3A}#bt .plan .sub{color:#2B2B2B}#bt .plan.top .sub{color:#F5F0E6}#bt .pop{background:#C6F24E;color:#141414;font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 7px;border-radius:4px;white-space:nowrap}#bt .art{position:relative;overflow:hidden;border-radius:4px;min-height:0;background:var(--a2)}#bt .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}#bt .chip{display:flex;align-items:center;min-height:48px;padding:0 16px;background:#FBF8F1;border:1px solid #DDD6C8;border-radius:6px;font-weight:600;font-size:15px;text-decoration:none;color:#141414}#bt .chip:hover{background:#FFFDF8;color:#141414}#bt .chip:focus-visible,#bt .fl:focus-visible{outline:3px solid #141414;outline-offset:2px}#bt .fl{color:#F5F0E6;text-decoration:none;font-size:15px}#bt .fl:hover{color:#F5F0E6;text-decoration:underline;text-underline-offset:3px}#bt .dark .fl:focus-visible{outline-color:#C6F24E}#bt .fh{margin:0 0 10px;font-size:15px;font-weight:700}#bt .fc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}#bt .noscroll{scrollbar-width:none}#bt .noscroll::-webkit-scrollbar{display:none}
#bt h1,#bt h2,#bt h3,#bt p,#bt figure,#bt ul,#bt ol{color:inherit}#bt img{max-width:none}

#bt .hc{display:flex;align-items:stretch;max-width:520px;background:#FFFDF8;border:1px solid #DDD6C8;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(20,20,20,.05)}
#bt .hc:focus-within{border-color:#141414}
#bt .hc input{flex:1 1 auto;min-width:0;min-height:52px;padding:0 16px;border:0;background:transparent;outline:0;font:500 16px 'Instrument Sans',Arial,sans-serif;color:#141414}
#bt .hc button{flex:none;margin:-1px -1px -1px 0;padding:0 22px;border:1px solid #141414;border-radius:0 6px 6px 0;background:#141414;color:#F5F0E6;font:700 15px/1 'Instrument Sans',Arial,sans-serif;cursor:pointer;transition:background .15s,color .15s}
#bt .hc button:hover{background:#FFFDF8;color:#141414}
#bt .hc button:focus-visible{outline:3px solid #141414;outline-offset:-3px}
@media(min-width:768px){#bt #what-we-do ol>li>h3{min-height:2.16em}}
#bt #trades .ul{text-decoration-thickness:3px!important;text-underline-offset:6px!important}
#bt .ul{text-decoration:underline;text-decoration-color:#C6F24E;text-decoration-thickness:4px;text-underline-offset:7px;text-decoration-skip-ink:none}
#bt #what-we-do ol>li{transition:transform .2s ease,box-shadow .2s ease}
@media(hover:hover){#bt #what-we-do ol>li:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,20,.08),0 18px 32px -14px rgba(20,20,20,.28)!important}#bt #what-we-do ol>li.lift:hover{border-color:#141414}#bt #what-we-do ol>li.dark:hover{box-shadow:0 0 0 2px #C6F24E,0 18px 32px -14px rgba(20,20,20,.4)!important}}
#bt .burger{display:none;width:44px;height:44px;padding:11px 10px;border:1px solid #DDD6C8;border-radius:6px;background:#FFFDF8;cursor:pointer;flex-direction:column;justify-content:space-between}
#bt .burger span{display:block;height:2px;background:#141414;border-radius:2px;transition:transform .2s,opacity .2s}
#bt header.open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}#bt header.open .burger span:nth-child(2){opacity:0}#bt header.open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
#bt .zoomable{cursor:zoom-in;transition:transform .35s ease}
@media(hover:hover){#bt figure:hover .zoomable{transform:scale(1.05)}}
#bt-lb{position:fixed;inset:0;z-index:99999;display:none;background:rgba(20,20,20,.88);overflow:auto;-webkit-overflow-scrolling:touch;cursor:zoom-out}
#bt-lb.on{display:block}
#bt-lb img{display:block;width:min(1100px,94vw);margin:5vh auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none;pointer-events:none}
#bt-lb button{position:fixed;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#F5F0E6;color:#141414;font:700 22px/44px Arial,sans-serif;cursor:pointer}
#bt .tcs{display:flex;flex-wrap:wrap;gap:10px}
#bt .tc{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid #5A5A5A;border-radius:6px;color:#F5F0E6;text-decoration:none;font-weight:600;font-size:15px;transition:background .15s,color .15s,border-color .15s}
#bt .tc:hover{background:#C6F24E;border-color:#C6F24E;color:#141414}
#bt .tc:focus-visible{outline:3px solid #C6F24E;outline-offset:2px}
#bt .plan ul.rule{gap:14px!important;padding-top:22px!important}
#bt .plan ul.rule li{position:relative;padding-left:28px;line-height:1.4}
#bt .plan ul.rule li::before{content:"";position:absolute;left:0;top:0;width:18px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23141414' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E") no-repeat center/18px 22px}
#bt .plan.top ul.rule li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23C6F24E' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E")}
#bt .pd{display:block;margin-top:-6px;text-align:center;font-size:14px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
#bt .plan.top .pd{color:#F5F0E6}
#bt .pd:hover{color:inherit;text-decoration-color:#C6F24E}
#bt .mp{border-radius:8px;overflow:hidden;background:#1E1E1E;border:1px solid #3A3A3A;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
#bt .mp-search{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#2B2B2B;font-size:15px;color:#F5F0E6}
#bt .mp-map{height:170px}
#bt .mp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid #2F2F2F}
#bt .mp-n{flex:none;width:24px;height:24px;border-radius:50%;background:#C6F24E;color:#141414;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
#bt .mp-blur{display:block;height:12px;border-radius:6px;background:#4A4A4A;filter:blur(1.5px);margin-bottom:7px}
#bt .mp-meta{font-size:13px;color:#BDB6A8}
#bt .mp-stars{color:#C6F24E;letter-spacing:1px}
#bt .mp-you{display:flex;align-items:center;justify-content:space-between;margin:10px;padding:12px 14px;border:1.5px dashed #C6F24E;border-radius:6px;color:#C6F24E;font-weight:700}
#bt .mp-you-sub{font-weight:500;font-size:13px;color:#BDB6A8}
#bt .plan{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
@media(hover:hover){#bt .plan:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,20,.08),0 18px 32px -14px rgba(20,20,20,.28)!important}#bt .plan:not(.top):hover{border-color:#141414}#bt .plan.top:hover{box-shadow:0 0 0 2px #C6F24E,0 18px 32px -14px rgba(20,20,20,.4)!important}}
#bt .swipe-hint{display:none}
@media(max-width:767px){#bt .swipe-hint{display:flex;justify-content:flex-end;align-items:center;gap:6px;max-width:1320px;margin:0 auto -4px;padding:0 24px;font-size:13px;font-weight:600;color:#BDB6A8}#bt .noscroll>figure{flex:0 0 78vw!important}#bt .noscroll>figure>div{height:200px!important}#bt .swipe-hint span{display:flex;align-items:center;height:1em;animation:btnudge 1.6s ease-in-out infinite}}
@keyframes btnudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){#bt .swipe-hint span{animation:none}}
#bt .fqs{display:flex;flex-direction:column;gap:10px}
#bt .fq{background:#FBF8F1;border:1px solid #DDD6C8;border-radius:6px;padding:0 24px;transition:border-color .15s}
#bt .fq:hover,#bt .fq[open]{border-color:#141414}
#bt .fq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font:700 18px/1.3 'Instrument Sans',Arial,sans-serif;color:#141414}
#bt .fq summary::-webkit-details-marker{display:none}
#bt .fq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:#C6F24E;color:#141414;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;line-height:1;transition:transform .2s}
#bt .fq[open] summary::after{transform:rotate(45deg)}
#bt .fa{padding:0 0 20px;max-width:760px}
#bt .fa p{margin:0 0 10px!important;font:400 17px/1.6 'Instrument Sans',Arial,sans-serif!important;color:#2B2B2B!important}
#bt .fa strong{font-weight:700;color:#141414}
@media(max-width:767px){
#bt [aria-label="Billing option"]{display:grid!important;grid-template-columns:1fr 1fr 1fr;width:100%}
#bt .seg{justify-content:center;padding:0 6px!important;font-size:14px!important;min-height:52px!important}
#bt .seg[data-term="yearly"]{flex-direction:column;gap:3px!important}
#bt .seg .tag{font-size:9px!important;padding:2px 5px!important}
#bt .plans{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin:16px -24px 0!important;padding:12px 24px 20px;scrollbar-width:none}
#bt .plans::-webkit-scrollbar{display:none}
#bt .plans>article{flex:0 0 84vw;scroll-snap-align:center}
#bt .plans-hint{margin:20px 0 0!important;padding:0!important;color:#2B2B2B!important}
}
/* GHL: full width, no section padding */
html .custom-code-container:has(#bt){font-size:0!important;line-height:0!important;color:transparent}
html,body{overflow-x:clip;background:#F5F0E6}
html div#bt{width:calc(100vw - var(--sb,0px));margin:0 0 0 calc(50% - 50vw + var(--sb,0px) / 2)}
html .c-wrapper:has(#bt),html .inner:has(#bt){padding-top:0!important;padding-bottom:0!important}
/* PHONE (matches the Claude Design mobile board) */
@media(max-width:767px){
#bt h1.d{font-size:clamp(32px,10.2vw,40px)!important}
#bt header{flex-wrap:nowrap;position:relative}
#bt .burger{display:flex}
#bt header nav{display:none!important;position:absolute;left:0;right:0;top:100%;z-index:50;flex-direction:column;align-items:stretch!important;gap:0!important;padding:4px 24px 20px;background:#F5F0E6;border-bottom:1px solid #DDD6C8;box-shadow:0 16px 24px -16px rgba(20,20,20,.25)}
#bt header.open nav{display:flex!important}
#bt header nav .nl{padding:14px 0;border-bottom:1px solid #DDD6C8;font-size:17px}
#bt header nav .btn{margin-top:16px;min-height:52px!important}
#bt .hero-cta{display:flex!important;width:100%}#bt .hc{flex-wrap:wrap;padding:5px;gap:6px}#bt .hc input{flex:1 1 100%;min-height:46px;padding:0 11px;font-size:15px}#bt .hc button{flex:1 1 100%;min-height:46px;margin:0;border-radius:4px}#bt #top{row-gap:0!important}#bt #top>div:first-child{display:contents}#bt #top>div:first-child>*{flex:1 1 100%;order:0}#bt #top>div[role=img]{order:1;margin:24px 0 8px}#bt #top>div:first-child>.hero-check-wrap{order:2;margin-top:0!important}

#bt #top>div[role=img]{height:420px!important}
#bt #what-we-do ol>li{display:grid!important;grid-template-columns:40px 1fr;column-gap:12px;row-gap:6px!important;align-items:start}
#bt #what-we-do ol>li>span.d{grid-row:span 2;font-size:36px!important}
#bt #what-we-do ol+p{text-align:left!important;font-size:22px!important}#bt .tc{padding:0 14px;font-size:14px}
#bt #google-check .gc-left{display:contents}
#bt #google-check .gc-left h2{order:1;flex:1 1 100%}
#bt #google-check .gc-left>p{order:2;flex:1 1 100%;margin:0!important}
#bt #google-check .gc-mock{order:3;flex:1 1 100%}
#bt #google-check .gc-left form{order:4;flex:1 1 100%}
#bt #google-check .gc-left form .btn{flex:1 1 100%!important}
#bt #google-check>div{gap:20px}
#bt article.lift>div:first-child{flex:1 1 100%!important}
}

html .c-custom-code:has(#bt){padding:0!important}

/* ===== PRICING PAGE ===== */
#bt .pg-sec{border-top:1px solid #DDD6C8}
#bt .pg-wrap{max-width:1320px;margin:0 auto;padding:72px 24px}
#bt .pg-h2{margin:0;font-size:clamp(32px,3.4vw,48px)}
#bt .incl{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px 32px}
#bt .incl-1{grid-template-columns:1fr;max-width:760px}
#bt .incl li,#bt .det dt{position:relative;padding-left:28px}
#bt .incl li::before,#bt .det dt::before,#bt .tk{content:"";display:inline-block;width:18px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23141414' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E") no-repeat center/18px 22px}
#bt .incl li::before,#bt .det dt::before{position:absolute;left:0;top:1px}
#bt .det-top{background:#141414;color:#F5F0E6;border-top-color:#141414}
#bt .det-top .det dt::before,#bt .det-top .tk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23C6F24E' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E")}
#bt .det-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#bt .det-for{margin:10px 0 0;font-size:18px;color:inherit;opacity:.8}
#bt .det{margin:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:22px 48px}
#bt .det dt{font-weight:700;font-size:17px}
#bt .det dd{margin:6px 0 0 28px;font-size:16px;line-height:1.55;opacity:.85}
#bt .det-btn{display:inline-flex!important;margin-top:32px;min-width:240px}
#bt .cmp-wrap{margin-top:28px;overflow-x:auto;border:1px solid #DDD6C8;border-radius:6px;background:#FBF8F1}
#bt .cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
#bt .cmp th,#bt .cmp td{padding:14px 16px;border-bottom:1px solid #E6E0D4;text-align:center;vertical-align:middle}
#bt .cmp tbody th{text-align:left;font-weight:600}
#bt .cmp thead th{font:800 20px/1.1 'Bricolage Grotesque',Arial,sans-serif;font-stretch:78%;padding:20px 16px}
#bt .cmp .c-top{background:#141414;color:#F5F0E6;border-bottom-color:#2B2B2B}
#bt .cmp .c-top .tk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23C6F24E' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E")}
#bt .cmp .cx{color:#BDB6A8}
#bt .cmp tfoot td{border-bottom:0;padding:18px 12px}
#bt .cmp tfoot a{display:flex!important;min-height:44px;font-size:15px}
#bt .small-print{margin:28px 0 0;font-size:14px;color:#2B2B2B}
#bt .small-print a{text-underline-offset:3px}
@media(max-width:767px){#bt .pg-wrap{padding:56px 24px}#bt .det-btn{width:100%}#bt .cmp th,#bt .cmp td{padding:12px 10px}}
@media(max-width:767px){#bt .cmp{min-width:0!important;font-size:12px;table-layout:fixed}#bt .cmp tr>*:first-child{width:38%}#bt .cmp tbody th{font-size:13px;padding-left:12px!important}#bt .cmp th,#bt .cmp td{padding:10px 4px!important;overflow-wrap:normal;word-break:normal;hyphens:manual}#bt .cmp thead th{font-size:15px!important;padding:14px 4px!important}#bt .cmp tfoot td{padding:12px 3px!important}#bt .cmp tfoot a{font-size:13px!important;padding:0 6px!important;min-height:40px}#bt .cmp-wrap{overflow-x:visible}}
#bt .incl-dark{background:#141414;color:#F5F0E6;border-top-color:#141414}
#bt .incl-dark .incl{gap:20px 32px;margin-top:32px}
#bt .incl-dark .incl li{font-weight:600;font-size:17px}
#bt .incl-dark .incl li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23C6F24E' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E")}
#bt .incl-dark + .pg-sec{border-top-color:transparent}
#bt .incl-dark .incl li{max-width:none}
@media(max-width:767px){#bt .incl-dark .incl li{max-width:300px}#bt .incl-dark .dbr{display:none}}
/* pricing plan sections: even spacing + end block */
#bt .det-for{margin-top:14px!important}
#bt .det{margin-top:32px!important}
#bt .det-end{margin-top:32px;display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
#bt .det-tag{margin:0;font-weight:700;font-size:20px}
#bt .det-end .det-btn{margin-top:0!important}
#bt .det-dark{display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:240px;padding:0 22px;border-radius:6px;background:#141414;color:#F5F0E6;font:700 16px/1 'Instrument Sans',Arial,sans-serif;text-decoration:none;transition:color .15s}
#bt .det-dark:hover{background:#141414;color:#C6F24E}
@media(max-width:767px){#bt .det-end{align-items:stretch;text-align:left}#bt .det-end .det-btn{width:100%}}
@media(max-width:767px){#bt .h1b{display:block}}
/* pricing: Get Ahead bigger + Get On Top column layout (5 Nov) */
#bt .det-top .pg-wrap{padding-top:88px;padding-bottom:88px}
#bt .det-top .det-for{font-size:19px}
#bt .det-top .det{row-gap:30px}
#bt .det-col{display:flex;flex-direction:column;gap:22px}
@media(max-width:767px){#bt .det-for .dbr{display:none}#bt .det-top .pg-wrap{padding-top:64px;padding-bottom:64px}}
@media(min-width:768px){#bt .cmp{table-layout:fixed}#bt .cmp tr>*:first-child{width:34%}}
#bt .det-top .pg-wrap{padding-top:72px}
#bt .det-top .det{margin-top:40px!important}
#bt .det-top .det-end{margin-top:56px}
@media(max-width:767px){#bt .plans-hint{justify-content:center!important}#bt .plans-hint .sh-l{animation-name:btnudgel}#bt .det-end .det-tag{text-align:center}}
@keyframes btnudgel{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
#bt .cmp .c-top.lm{color:#C6F24E;font-weight:700}
/* ring carousel hero (class pm-hero on #top; used on pay monthly + homepage): circular carousel lying back at an angle. Front card full, side cards overlapped behind it, 4th hidden at the back. Rotates right -> front -> left -> back, no fading. NOTE: no !important on transform, it blocks the animation */
#bt #top.pm-hero div[role=img]{perspective:1800px;perspective-origin:50% 0%}
html:has(#top.pm-hero),body:has(#top.pm-hero){overflow-x:clip}
#bt #top.pm-hero .spin{animation:pmring 24s infinite ease-in-out!important;transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(0) translateY(0) scale(.92)}
#bt #top.pm-hero .spin>div:first-child{box-shadow:0 1px 2px rgba(20,20,20,.08),0 50px 50px -30px rgba(20,20,20,.35)!important}
#bt #top.pm-hero .p0{animation-delay:0s!important}#bt #top.pm-hero .p1{animation-delay:-6s!important}#bt #top.pm-hero .p2{animation-delay:-12s!important}#bt #top.pm-hero .p3{animation-delay:-18s!important}
@keyframes pmring{0%,18%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(0) translateY(0) scale(.92);z-index:5;opacity:1}21.4%{z-index:5}21.5%{z-index:3}25%,43%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(-36%) translateY(-5%) scale(.64);z-index:3;opacity:1}44%{z-index:1}50%,68%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(0) translateY(-12%) scale(.54);z-index:1}72%{z-index:2}75%,93%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(36%) translateY(-5%) scale(.64);z-index:2;opacity:1;animation-timing-function:ease-in}95.4%{opacity:1}96.4%{z-index:2;opacity:.6}96.5%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(60%) translateY(2%) scale(.78);z-index:6;opacity:.6;animation-timing-function:ease-out}97.5%{opacity:1}100%{transform:translate(-56%,-34%) rotateX(28deg) rotateZ(14deg) skewX(-2deg) translateX(0) translateY(0) scale(.92);z-index:6;opacity:1}}
@media(prefers-reduced-motion:reduce){#bt #top.pm-hero .spin{animation:none!important}}
@media(max-width:767px){#bt #top.pm-hero>div[role=img]{margin-top:-70px;left:22px}#bt #top.pm-hero .spin{width:430px!important}#bt #top.pm-hero:has(.hero-check-wrap)>div[role=img]{margin-bottom:116px}}
/* phone-only line break: <br class="pbr"> */
#bt br.pbr{display:none}@media(max-width:767px){#bt br.pbr{display:inline}}
/* homepage example sites: focus reel (Dom, 6 Nov). NOT tied to page scroll: visitors drag/swipe it sideways or click a side card; the centre card is bigger with its number + trade under it. Starts on card 2 so there are cards either side. Only switches on when the script adds .reel-on */
#bt .reel-ticks{display:none}
#bt #examples.reel-on .reel-pin{padding:0 0 56px;overflow:hidden}
#bt #examples.reel-on .noscroll{display:block!important;position:relative;overflow:visible!important;padding:0!important;margin:56px 0 0;scroll-snap-type:none!important;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
#bt #examples.reel-on .noscroll.dragging{cursor:grabbing}
#bt #examples.reel-on .noscroll>figure{position:absolute!important;left:50%;top:50%;margin:0!important;flex:none!important;will-change:transform;transform-origin:50% 50%}
#bt #examples.reel-on .noscroll img{pointer-events:none}
#bt #examples.reel-on .noscroll>figure>figcaption{display:none!important}
#bt #examples.reel-on .reel-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:16px;display:flex;justify-content:space-between;font-size:15px;color:#F5F0E6}
#bt #examples.reel-on .reel-label span:first-child{color:#C6F24E;font-weight:700}
#bt #examples.reel-on .reel-ticks{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:20px;margin:76px 0 0}
#bt #examples.reel-on .reel-ticks i{display:block;width:1px;height:9px;background:#6E685E}
#bt #examples.reel-on .reel-ticks i.on{height:20px;background:#F5F0E6}
#bt #examples.reel-on .reel-pin>p:last-child{margin:24px auto 0!important;padding:0 24px!important}
@media(max-width:767px){#bt #examples.reel-on .noscroll{margin-top:28px}#bt #examples.reel-on .reel-ticks{margin-top:64px;gap:4px}#bt #examples.reel-on .reel-label{font-size:14px}}
/* trade pages: showcase rows. One angled demo mockup (desktop + phone, same tilt as the hero carousel) beside text; rows alternate sides (Dom, 6 Nov: show the demo pages through the page, angled, not grids of pictures) */
#bt .shw{display:flex;flex-direction:column;gap:104px;margin:48px 0 34px}
#bt .shw-row{display:flex;align-items:center;gap:56px}
#bt .shw-row.rev{flex-direction:row-reverse}
#bt .shw-pic{flex:1 1 56%;min-width:0;height:460px;position:relative;perspective:1800px;perspective-origin:50% 0%}
#bt .shw-card{position:absolute;left:50%;top:50%;width:min(520px,90%);height:370px;transform:translate(-56%,-54%) rotateX(28deg) rotateZ(14deg) skewX(-2deg)}
#bt .shw-row.rev .shw-card{transform:translate(-44%,-54%) rotateX(28deg) rotateZ(-14deg) skewX(2deg)}
#bt .shw-row.rev .mk-ph{right:auto;left:-20px}
#bt .shw-txt{flex:1 1 44%;min-width:0}
#bt .shw-lab{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;color:#2B2B2B}
#bt .shw-txt h3{margin:10px 0 0;font-size:clamp(30px,3vw,42px);line-height:1.05}
#bt .shw-txt p:last-child{margin:14px 0 0;font-size:18px;color:#2B2B2B;max-width:460px}
#bt .mk-b{height:100%;display:flex;flex-direction:column;border:1px solid rgba(20,20,20,.12);border-radius:6px;overflow:hidden;background:#F4F7F8;box-shadow:0 1px 2px rgba(20,20,20,.08),0 50px 50px -30px rgba(20,20,20,.35)}
#bt .mk-bar{flex:none;display:flex;align-items:center;gap:5px;padding:8px 10px;background:#141414}
#bt .mk-bar i{width:8px;height:8px;border-radius:50%;background:#5A5A5A}
#bt .mk-bar b{margin-left:10px;width:45%;height:10px;border-radius:4px;background:#2B2B2B}
#bt .mk-scr{flex:1;min-height:0;position:relative;overflow:hidden}
#bt .mk-scr img,#bt .mk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
#bt .mk-ph{position:absolute;right:-20px;bottom:-32px;width:112px;height:226px;padding:5px;background:#141414;border-radius:22px;box-shadow:0 2px 4px rgba(20,20,20,.14),0 16px 30px -10px rgba(20,20,20,.36)}
#bt .mk-ph>div{height:100%;border-radius:17px;overflow:hidden;position:relative;background:#F4F7F8}
@media(max-width:767px){#bt .shw{gap:48px;margin:32px 0 0}#bt .shw-row,#bt .shw-row.rev{flex-direction:column;align-items:stretch;gap:16px}#bt .shw-pic{flex:none;width:100%;height:320px}#bt .shw-card{width:310px;height:222px}#bt .mk-ph{width:76px;height:154px;right:-10px;bottom:-22px;border-radius:16px;padding:4px}#bt .mk-ph>div{border-radius:12px}#bt .shw-row.rev .mk-ph{left:-10px}}
/* final call-to-action band: on phone the button comes before the tagline (Dom, 6 Nov) */
@media(max-width:767px){#bt .cta-end .pg-wrap{display:flex;flex-direction:column;align-items:center}#bt .cta-end .pg-wrap>div{order:2;margin-top:24px!important}#bt .cta-end .pg-wrap>p{order:3;margin-top:16px!important}}
/* phone: desktop-only breaks in H1s are hidden; extra CTA under the picture rows needs room for the angled pictures (Dom, 6 Nov) */
@media(max-width:767px){#bt h1 .dbr{display:none}}
/* trade pages: black CTA strip after the picture rows (Dom, 6 Nov) */
#bt .cta-strip{background:#141414;color:#F5F0E6}
#bt .cta-strip-in{max-width:1320px;margin:0 auto;padding:56px 72px;display:flex;align-items:center;justify-content:space-between;gap:24px 40px}
#bt .cta-strip h2{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:1.08}
#bt .cta-strip .btn{flex:none;min-height:56px;padding:0 32px;font-size:17px}
@media(max-width:767px){#bt .cta-strip-in{flex-direction:column;align-items:stretch;padding:48px 24px}#bt .cta-strip .btn{width:100%;justify-content:center}#bt .cta-strip .dbr{display:none}}

/* electricians page: phone CTA strip, button above centred tagline (Dom 8 Nov) */
@media(max-width:767px){#bt .cta-strip.cta-flip .cta-strip-in{flex-direction:column-reverse}#bt .cta-strip.cta-flip h2{text-align:center}}

/* about page: phone, centre the story button + tagline (Dom 9 Nov) */
@media(max-width:767px){#bt .story-cta{text-align:center!important}}

/* iso: 3D-flat floating cards (trades hub, Dom 9 Nov, v7: triangle, top card sits between the two lower cards, its left edge inside the front-left card) */
#bt .iso{position:relative;height:580px;min-width:0}
#bt .iso-st{position:absolute;left:50%;top:55%;width:0;height:0;transform:rotateX(46deg) rotateZ(-22deg);transform-style:preserve-3d}
#bt .iso.flip .iso-st{transform:rotateX(46deg) rotateZ(22deg)}
#bt .iso-st img{position:absolute;object-fit:cover;object-position:top;border-radius:8px;outline:1px solid rgba(20,20,20,.1);transition:transform .45s ease,box-shadow .45s ease}
#bt .shw-row .iso{height:500px}
#bt .iso-st img{width:350px;height:219px;left:-175px;top:-109px}
#bt .iso-st .z1{transform:translate3d(-160px,40px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso-st .z2{transform:translate3d(175px,0px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso-st .z3{transform:translate3d(-40px,-170px,40px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso.flip .iso-st .z1{transform:translate3d(160px,40px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso.flip .iso-st .z2{transform:translate3d(-175px,0px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso.flip .iso-st .z3{transform:translate3d(40px,-170px,40px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso-st img{width:280px;height:175px;left:-140px;top:-87px}
#bt .shw-row .iso-st .z1{transform:translate3d(-130px,32px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso-st .z2{transform:translate3d(142px,0px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso-st .z3{transform:translate3d(-32px,-138px,34px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso.flip .iso-st .z1{transform:translate3d(130px,32px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso.flip .iso-st .z2{transform:translate3d(-142px,0px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso.flip .iso-st .z3{transform:translate3d(32px,-138px,34px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
@media(max-width:767px){#bt .iso,#bt .shw-row .iso{height:360px;width:100%}#bt .iso-st img{width:190px;height:119px;left:-95px;top:-59px}#bt .iso-st .z1{transform:translate3d(-92px,24px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .iso-st .z2{transform:translate3d(100px,0px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .iso-st .z3{transform:translate3d(-22px,-95px,24px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .iso.flip .iso-st .z1{transform:translate3d(92px,24px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}#bt .iso.flip .iso-st .z2{transform:translate3d(-100px,0px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}#bt .iso.flip .iso-st .z3{transform:translate3d(22px,-95px,24px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso-st img{width:190px;height:119px;left:-95px;top:-59px}#bt .shw-row .iso-st .z1{transform:translate3d(-92px,24px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso-st .z2{transform:translate3d(100px,0px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso-st .z3{transform:translate3d(-22px,-95px,24px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso.flip .iso-st .z1{transform:translate3d(92px,24px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso.flip .iso-st .z2{transform:translate3d(-100px,0px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}#bt .shw-row .iso.flip .iso-st .z3{transform:translate3d(22px,-95px,24px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}}
@media(prefers-reduced-motion:reduce){#bt .iso-st img{transition:none}}

/* iso phones: phone screenshot attached to a card's bottom-right corner (trade rows only, hidden on phones). Dom 9 Nov */
#bt .iso .iso-st .ph{position:absolute;width:64px;height:128px;left:-32px;top:-64px;padding:4px;background:#141414;border-radius:14px;box-shadow:-10px 16px 22px -8px rgba(20,20,20,.35)}
#bt .iso .iso-st .ph img{position:absolute;left:4px;top:4px;width:56px;height:120px;border-radius:10px;object-fit:cover;object-position:top;transform:none;box-shadow:none;outline:0}
#bt .shw-row .iso .iso-st .ph.on3{transform:translate3d(94px,-91px,64px)}
#bt .shw-row .iso .iso-st .ph.on2{transform:translate3d(268px,47px,50px)}
#bt .shw-row .iso.flip .iso-st .ph{box-shadow:10px 16px 22px -8px rgba(20,20,20,.35)}
#bt .shw-row .iso.flip .iso-st .ph.on3{transform:translate3d(158px,-91px,64px)}
#bt .shw-row .iso.flip .iso-st .ph.on1{transform:translate3d(256px,79px,50px)}
@media(max-width:767px){#bt .iso .iso-st .ph{display:none}}

/* trade rows v2 (Dom 9 Nov): 2 bigger cards (home back-left, service front-right) + bigger phones. Overrides the 3-card row rules above */
#bt .shw-row .iso .iso-st img{width:380px;height:237px;left:-190px;top:-118px}
#bt .shw-row .iso .iso-st .z3{transform:translate3d(-95px,-70px,0px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso .iso-st .z2{transform:translate3d(110px,62px,20px);box-shadow:-16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso.flip .iso-st .z3{transform:translate3d(95px,-70px,0px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso.flip .iso-st .z2{transform:translate3d(-110px,62px,20px);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .shw-row .iso .iso-st .ph{width:84px;height:168px;left:-42px;top:-84px;padding:5px;border-radius:17px}
#bt .shw-row .iso .iso-st .ph img{left:5px;top:5px;width:74px;height:158px;border-radius:12px}
#bt .shw-row .iso .iso-st .ph.on3{transform:translate3d(78px,-150px,50px)}
#bt .shw-row .iso .iso-st .ph.on2{transform:translate3d(262px,128px,60px)}
#bt .shw-row .iso.flip .iso-st .ph.on3{transform:translate3d(-78px,-150px,50px)}
#bt .shw-row .iso.flip .iso-st .ph.on2{transform:translate3d(-262px,128px,60px)}
@media(max-width:767px){#bt .shw-row .iso .iso-st img{width:220px;height:137px;left:-110px;top:-68px}#bt .shw-row .iso .iso-st .z3{transform:translate3d(-52px,-40px,0px)}#bt .shw-row .iso .iso-st .z2{transform:translate3d(62px,36px,20px)}#bt .shw-row .iso.flip .iso-st .z3{transform:translate3d(52px,-40px,0px)}#bt .shw-row .iso.flip .iso-st .z2{transform:translate3d(-62px,36px,20px)}}

/* hero size up + phone fixes (Dom 9 Nov) */
#bt .iso.iso-hero{height:660px}
#bt .iso-hero .iso-st img{width:400px;height:250px;left:-200px;top:-125px}
#bt .iso-hero .iso-st .z1{transform:translate3d(-182px,46px,20px)}
#bt .iso-hero.flip .iso-st .z1{transform:translate3d(182px,46px,20px)}
#bt .iso-hero .iso-st .z2{transform:translate3d(199px,0px,20px)}
#bt .iso-hero.flip .iso-st .z2{transform:translate3d(-199px,0px,20px)}
#bt .iso-hero .iso-st .z3{transform:translate3d(-46px,-194px,40px)}
#bt .iso-hero.flip .iso-st .z3{transform:translate3d(46px,-194px,40px)}
@media(max-width:767px){#bt .iso.iso-hero{height:290px}#bt .iso-hero .iso-st{top:55%}#bt .iso-hero .iso-st img{width:180px;height:112px;left:-90px;top:-56px}#bt .iso-hero .iso-st .z1{transform:translate3d(-95px,22px,20px)}#bt .iso-hero .iso-st .z2{transform:translate3d(78px,0px,20px)}#bt .iso-hero .iso-st .z3{transform:translate3d(-32px,-86px,24px)}#bt .iso-hero.flip .iso-st .z1{transform:translate3d(95px,22px,20px)}#bt .iso-hero.flip .iso-st .z2{transform:translate3d(-78px,0px,20px)}#bt .iso-hero.flip .iso-st .z3{transform:translate3d(32px,-86px,24px)}#bt .shw-row .iso{flex:none!important;height:240px;margin:8px 0 0}#bt .shw-row .iso .iso-st{top:50%}#bt .shw-row .iso .iso-st img{width:200px;height:125px;left:-100px;top:-62px}#bt .shw-row .iso .iso-st .z3{transform:translate3d(-48px,-36px,0px)}#bt .shw-row .iso .iso-st .z2{transform:translate3d(56px,32px,20px)}#bt .shw-row .iso.flip .iso-st .z3{transform:translate3d(48px,-36px,0px)}#bt .shw-row .iso.flip .iso-st .z2{transform:translate3d(-56px,32px,20px)}}

/* hero phone v2 (Dom 9 Nov): bigger cards, more space, even overflow left/right */
@media(max-width:767px){#bt .iso.iso-hero{height:340px}#bt .iso-hero .iso-st{top:56%}#bt .iso-hero .iso-st img{width:220px;height:137px;left:-110px;top:-68px}#bt .iso-hero .iso-st .z1{transform:translate3d(-122px,36px,20px)}#bt .iso-hero .iso-st .z2{transform:translate3d(106px,4px,20px)}#bt .iso-hero .iso-st .z3{transform:translate3d(-40px,-112px,24px)}#bt .iso-hero.flip .iso-st .z1{transform:translate3d(122px,36px,20px)}#bt .iso-hero.flip .iso-st .z2{transform:translate3d(-106px,4px,20px)}#bt .iso-hero.flip .iso-st .z3{transform:translate3d(40px,-112px,24px)}}

/* trades hub phone spacing (Dom 9 Nov): picture tight to its own text, bigger gap between trades */
@media(max-width:767px){#bt .shw.shw-iso{gap:72px;margin-top:0}#bt .shw-iso .shw-row{gap:0}#bt .shw-iso .shw-row .iso{height:190px;margin:0}}

/* guides (v59, 9 Nov): reading column, quick answer box, lists, tables */
#bt .gd{max-width:760px}
#bt .gd>h2{margin:56px 0 0;font-size:clamp(28px,3vw,38px)}
#bt .gd>h2:first-child{margin-top:0}
#bt .gd>p{margin:14px 0 0}
#bt .gd a{color:#141414;font-weight:600;text-underline-offset:3px}
#bt .gd-meta{margin:20px 0 0;font-size:15px;color:#5A5A5A}
#bt .gd-ans{margin:0;padding:24px 28px;background:#FBF8F1;border:1px solid #DDD6C8;border-radius:6px}
#bt .gd-ans h2{margin:0;font-size:24px}
#bt .gd-ans .incl{margin-top:16px;gap:10px}
#bt .gd .incl{grid-template-columns:1fr;margin-top:16px;gap:10px}
#bt .gd-ol{list-style:none;counter-reset:gd;margin:16px 0 0;padding:0;display:grid;gap:12px}
#bt .gd-ol li{counter-increment:gd;position:relative;padding-left:44px;min-height:30px}
#bt .gd-ol li::before{content:counter(gd);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;background:#141414;color:#F5F0E6;font:700 15px/30px 'Instrument Sans',Arial,sans-serif;text-align:center}
#bt .gd-ul{margin:16px 0 0;padding-left:22px;display:grid;gap:8px}
#bt .gd-tip{margin:20px 0 0}
#bt .gd-src{margin:12px 0 0;font-size:14px;color:#5A5A5A}
#bt .gd .cmp-wrap{margin-top:20px}
#bt .gd .cmp{min-width:0;table-layout:auto}
#bt .gd .cmp th,#bt .gd .cmp td{text-align:left;vertical-align:top}
#bt .gd .cmp thead th{font-size:17px;padding:14px 16px}
#bt .gd-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:20px}
#bt .gd-2>div{padding:20px 24px;border:1px solid #DDD6C8;border-radius:6px;background:#FBF8F1}
#bt .gd-2 h3{margin:0;font-size:20px}
#bt .gd-2 .incl,#bt .gd-2 .gd-ul{margin-top:12px}
#bt .gd .fqs{margin-top:20px}
@media(max-width:767px){#bt .gd>h2{margin-top:48px}#bt .gd-ans{padding:20px}#bt .gd .cmp th,#bt .gd .cmp td{padding:12px 10px;font-size:15px}}

/* guides colour (v61, 9 Nov): dark short answer, black table heads, big stat, dark steps section */
#bt .gd-sell .incl li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 24' fill='none' stroke='%23C6F24E' stroke-width='2.5'%3E%3Cpath d='M2 13l5 5 9-11'/%3E%3C/svg%3E")}
#bt .gd .cmp thead th{background:#141414;color:#F5F0E6;border-bottom-color:#141414}
#bt .gd-stat{margin:20px 0 0;font:800 clamp(28px,3vw,40px)/1.15 'Bricolage Grotesque',Arial,sans-serif;font-stretch:78%}
#bt .gd-dark a{color:#F5F0E6;font-weight:600;text-decoration-color:#C6F24E;text-underline-offset:4px}
#bt .gd-dark .gd-lead{margin:14px 0 0;font-size:19px;opacity:.85}
#bt .gd-steps{list-style:none;counter-reset:gd;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
#bt .gd-steps li{counter-increment:gd;padding:24px;border:1px solid #5A5A5A;border-radius:6px;font-size:17px}
#bt .gd-steps li::before{content:counter(gd);display:block;width:36px;height:36px;margin-bottom:16px;border-radius:50%;background:#C6F24E;color:#141414;font:700 16px/36px 'Instrument Sans',Arial,sans-serif;text-align:center}
#bt .gd-dark .gd-end{margin:36px 0 0;max-width:760px;opacity:.85}
@media(max-width:1023px){#bt .gd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){#bt .gd-steps{grid-template-columns:1fr;gap:12px;margin-top:28px}#bt .gd-steps li{padding:20px;display:flex;gap:16px;align-items:flex-start}#bt .gd-steps li::before{flex:none;margin:0}#bt .gd-dark .gd-end{margin-top:28px}}

/* guides layout (v62, 9 Nov): centred column, ByTrades box in black + lime (selling = black/lime) */
#bt .gd{margin-left:auto;margin-right:auto}
#bt .gd-hero{max-width:808px;margin:0 auto;padding:56px 24px 40px}
#bt .gd-sell{margin:56px 0 0;padding:32px;background:#141414;color:#F5F0E6;border-radius:6px}
#bt .gd-sell h2{margin:0;font-size:clamp(28px,3vw,38px)}
#bt .gd-sell p{margin:14px 0 0}
#bt .gd-sell .incl{margin-top:20px}
#bt .gd-sell a:not(.btn){color:#F5F0E6;text-decoration-color:#C6F24E;text-underline-offset:4px}
#bt .gd-sell .btn{margin-top:28px}
@media(max-width:767px){#bt .gd-sell{padding:24px 20px;margin-top:48px}#bt .gd-sell .btn{width:100%}}

/* guides spacing (v63, 9 Nov): group blocks so it's clear what belongs together */
#bt .gd>h3{margin:44px 0 0;font-size:24px}
#bt .gd .cmp-wrap+p:not(.gd-src){margin-top:24px}
#bt .gd .gd-stat+p{margin-top:8px}

/* guides step cards (v64, 9 Nov): how-to steps as small cards */
#bt .gd-cards{list-style:none;counter-reset:gd;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#bt .gd-cards li{counter-increment:gd;padding:20px;background:#FBF8F1;border:1px solid #DDD6C8;border-radius:6px;font-size:16px}
#bt .gd-cards li::before{content:counter(gd);display:block;width:30px;height:30px;margin-bottom:12px;border-radius:50%;background:#141414;color:#F5F0E6;font:700 15px/30px 'Instrument Sans',Arial,sans-serif;text-align:center}
#bt .gd-cards li strong{display:block;margin-bottom:4px;font-size:17px}
#bt .gd-cards li:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:767px){#bt .gd-cards{grid-template-columns:1fr}}

/* guides step cards note (v65, 9 Nov): plain note in the empty 8th slot, no card */
#bt .gd-cards li.gd-note{counter-increment:none;background:none;border:0;padding:8px 4px;font-size:15px;align-self:center}
#bt .gd-cards li.gd-note::before{display:none}
#bt .gd-cards li.gd-note strong{display:inline;margin:0;font-size:15px}

/* step cards with titles in the dark section (v66, 9 Nov) */
#bt .gd-steps li strong{display:block;margin-bottom:6px;font-size:18px;color:#F5F0E6}

/* v67 (9 Nov): desktop-only line breaks everywhere; hover on dark step cards */
@media(max-width:767px){#bt br.dbr{display:none}}
#bt .gd-steps li{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
@media(hover:hover){#bt .gd-steps li:hover{transform:translateY(-4px);border-color:#C6F24E;box-shadow:0 18px 32px -14px rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){#bt .gd-steps li{transition:none}#bt .gd-steps li:hover{transform:none}}

/* ranking check page layout (v68, 9 Nov): text + map left, form right; phone = text, form, map */
#bt .rc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"txt form" "map form";gap:32px 64px;align-items:start}
#bt .rc-txt{grid-area:txt;padding-top:48px}
#bt .rc-map{grid-area:map;max-width:460px}
#bt .rc-form{grid-area:form;max-width:520px}
@media(max-width:899px){#bt .rc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "form" "map"}#bt .rc-txt{padding-top:0}}

/* builders page hero (v68, 10 Nov): phone = bigger angled pair, a corner can run off each screen edge, less empty space below */
@media(max-width:767px){#bt #top .iso.bh-iso{height:270px;margin:-8px 0 -66px}#bt #top .bh-iso .iso-st{left:50%!important;top:50%}#bt #top .bh-iso .iso-st img{width:262px;height:164px;left:-131px;top:-82px}#bt #top .bh-iso .iso-st .z3{transform:translate3d(66px,-46px,0)}#bt #top .bh-iso .iso-st .z2{transform:translate3d(-76px,40px,20px)}}

/* trades hub hero (v68, 10 Nov): 4th card (builder site) tucked behind the others, bottom */
#bt .iso-hero.flip .iso-st .z4{transform:translate3d(-95px,255px,0);box-shadow:16px 26px 34px -12px rgba(20,20,20,.28)}
#bt .iso-hero.flip .iso-st .z3{transform:translate3d(90px,-212px,40px)}
@media(max-width:767px){#bt .iso.iso-hero{height:312px;margin-top:4px}#bt .iso-hero .iso-st{top:51%}#bt .iso-hero.flip .iso-st .z4{transform:translate3d(-52px,140px,0)}#bt .iso-hero.flip .iso-st .z3{transform:translate3d(50px,-117px,24px)}}
