/* === sitewide-layout-fix.css === */
/* DeviceDIY shared sitewide layout repair — 2026-11-04. Loaded last on EVERY page. */
:root{--dd-deep:#172b26;--dd-green:#1d5648;--dd-cream:#fff8ea;--dd-gold:#e49a36}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:100px}
body{margin:0;min-width:320px}
/* Never let an unstyled inner page fall back to inline logo/navigation. */
.topbar,.sitehead{position:relative!important;width:100%!important;z-index:50!important;background:var(--dd-cream)!important;border-bottom:2px solid var(--dd-deep)!important}
.topbar:before,.sitehead:before{display:block!important;box-sizing:border-box!important;padding:4px 16px!important;min-height:30px!important;line-height:22px!important;white-space:normal!important}
.shell{width:min(1190px,calc(100% - 48px))!important;margin-inline:auto!important}
.topbar .nav,.sitehead .headrow{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:24px!important;min-height:86px!important;width:min(1190px,calc(100% - 48px))!important;margin-inline:auto!important;padding:10px 0!important}
.topbar .brand,.sitehead .identity{display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;gap:10px!important;font-family:ui-sans-serif,system-ui,sans-serif!important;font-size:clamp(20px,2vw,25px)!important;line-height:1.15!important;letter-spacing:-.045em!important;font-weight:900!important;text-decoration:none!important;color:var(--dd-deep)!important;white-space:nowrap!important}
.topbar .brand img,.sitehead .identity img{display:block!important;width:40px!important;height:40px!important;object-fit:contain!important;flex:0 0 40px!important}
.topbar .brand-diy,.sitehead .identity b{color:#0b7e68!important}
.topbar .nav-right,.sitehead .headnav{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(14px,2.3vw,30px)!important;flex-wrap:nowrap!important;margin-left:auto!important;font-size:14px!important;font-weight:750!important}
.topbar .nav-right>a:not(.nav-cta),.sitehead .headnav>a:not(.navbutton){display:inline-flex!important;align-items:center!important;min-height:44px!important;white-space:nowrap!important;color:var(--dd-deep)!important;text-decoration:none!important;padding:8px 0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.topbar .nav-right>a:not(.nav-cta):hover,.sitehead .headnav>a:not(.navbutton):hover{color:#087e68!important;text-decoration:underline!important;text-underline-offset:5px!important}
.topbar .nav-cta,.sitehead .headnav .navbutton{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;flex:0 0 auto!important;padding:12px 18px!important;min-height:45px!important;white-space:nowrap!important;border-radius:7px!important;background:var(--dd-gold)!important;border:2px solid var(--dd-deep)!important;box-shadow:3px 4px 0 var(--dd-deep)!important;color:var(--dd-deep)!important;font-size:14px!important;font-weight:850!important;text-decoration:none!important}
.topbar .nav-cta:hover,.sitehead .headnav .navbutton:hover{background:#ffbe61!important;transform:translate(1px,1px)!important;box-shadow:2px 3px 0 var(--dd-deep)!important}
.topbar .mobile-nav-toggle,.sitehead .mobile-menu{display:none!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;min-width:46px!important;min-height:46px!important;background:#fff3dc!important;border:2px solid var(--dd-deep)!important;border-radius:7px!important;box-shadow:2px 3px 0 var(--dd-deep)!important;color:var(--dd-deep)!important;font-weight:800!important;font-size:19px!important;cursor:pointer!important}
.topbar .mobile-nav-panel,.sitehead .mobile-links{display:none!important}
/* Consistent gutters and navigation at bottom of ALL tool pages. */
.growth-layout{width:min(1190px,calc(100% - 48px))!important;max-width:1190px!important;margin-inline:auto!important;padding:40px 0 80px!important}
.growth-layout>.growth-toplink{display:inline-flex!important;margin-bottom:18px!important;font-weight:750!important;text-decoration:none!important}
.growth-navlinks{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:30px!important}
.growth-navlinks a{display:inline-flex!important;align-items:center!important;padding:10px 15px!important;min-height:43px!important;text-decoration:none!important;border:1.5px solid #276252!important;border-radius:5px!important;background:#fdf4e4!important}
.foot,.sitefoot{background:var(--dd-deep)!important;color:#fff3de!important;border-top:3px solid #e9aa64!important}
.foot .foot-inner,.sitefoot .footrow{width:min(1190px,calc(100% - 48px))!important;min-height:90px!important;margin-inline:auto!important;padding:22px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:16px 30px!important}
.foot .footer-links,.sitefoot .footrow>div{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px 24px!important}
.foot a,.sitefoot a{color:#fff3de!important;text-decoration:none!important;margin:0!important}
.foot a:hover,.sitefoot a:hover{text-decoration:underline!important;text-underline-offset:4px!important}
.foot span,.sitefoot span{color:#fff3de!important}
@media(max-width:850px){
 .topbar .nav-right,.sitehead .headnav{display:none!important}
 .topbar .mobile-nav-toggle,.sitehead .mobile-menu{display:inline-flex!important;margin-left:auto!important}
 .topbar .mobile-nav-panel.open,.sitehead .mobile-links.open{display:flex!important;position:relative!important;width:min(1190px,calc(100% - 48px))!important;margin:0 auto 14px!important;padding:10px!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;background:#fff7e8!important;border:2px solid var(--dd-deep)!important;border-radius:7px!important}
 .topbar .mobile-nav-panel.open a,.sitehead .mobile-links.open a{display:block!important;min-height:46px!important;padding:12px 15px!important;color:var(--dd-deep)!important;text-decoration:none!important;font-weight:750!important;border:0!important;border-bottom:1px solid #decbb0!important}
 .topbar .mobile-nav-panel.open a:last-child,.sitehead .mobile-links.open a:last-child{border-bottom:0!important}
}
@media(max-width:560px){
 .topbar .nav,.sitehead .headrow{width:calc(100% - 30px)!important;min-height:72px!important;gap:12px!important}
 .topbar .brand,.sitehead .identity{font-size:21px!important;gap:8px!important}
 .topbar .brand img,.sitehead .identity img{width:36px!important;height:36px!important;flex-basis:36px!important}
 .topbar .mobile-nav-panel.open,.sitehead .mobile-links.open{width:calc(100% - 30px)!important}
 .topbar:before,.sitehead:before{font-size:8px!important;letter-spacing:.06em!important;line-height:1.4!important;min-height:auto!important;padding:7px 12px!important}
 .growth-layout{width:calc(100% - 30px)!important;padding:24px 0 55px!important}
 .foot .foot-inner,.sitefoot .footrow{width:calc(100% - 30px)!important;flex-direction:column!important;align-items:flex-start!important}
 .growth-navlinks a{font-size:12px!important}
}
@media print{.topbar,.sitehead,.foot,.sitefoot{display:none!important}}


/* === how-it-works.css === */
/* Dedicated DeviceDIY methodology page. Scoped so tool pages stay untouched. */
:root{--mc:#fff7e8;--mi:#172e27;--mt:#28776b;--mo:#e68d62;--mg:#efb84e;--mm:#b5d9c2;--mb:#d9c7b2}
html{scroll-behavior:smooth}
body{background:#f7f0e4;color:var(--mi);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.55}
a{color:inherit}.skip-link{position:absolute;top:-80px;left:15px;background:#fff;color:#172e27;padding:10px 14px;z-index:200}.skip-link:focus{top:8px}
.topbar:before{content:'FREE TO USE  /  NO SIGNUP  /  PRIVATE BROWSER TESTS  /  DEVICEDIY';display:block!important;letter-spacing:.13em;font-size:10px;font-weight:850;background:#172b26!important;color:#fff5e6!important;line-height:25px;text-align:center}
.topbar .brand-diy{color:#0b7e68}.topbar .brand-logo-image{width:40px;height:40px;object-fit:contain}
.method-page{max-width:1190px;width:calc(100% - 48px);margin:0 auto;padding:28px 0 76px}
.method-breadcrumb{font-size:13px;display:flex;align-items:center;gap:11px;margin:0 0 24px;font-weight:700}.method-breadcrumb a{color:#087866;text-decoration:none}.method-breadcrumb a:hover{text-decoration:underline}.method-breadcrumb span:last-child{color:#5b625a}
.method-hero{border:2px solid #173d34;border-radius:8px;background:#f4d6ac;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:30px;padding:clamp(26px,4.8vw,65px);box-shadow:7px 8px 0 #1e5449;overflow:hidden}
.method-overline,.method-tag{font-size:11px;font-weight:900;letter-spacing:.15em;color:#205b4c;text-transform:uppercase}.method-overline{margin:0 0 24px}.method-hero h1{font-size:clamp(50px,6vw,82px);line-height:.97;letter-spacing:-.065em;margin:0 0 25px;font-weight:900;max-width:700px}.method-hero h1 em{font-family:Georgia,serif;color:#bf512f;font-weight:900}.method-intro{font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:#344d44;max-width:660px}.method-pills{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.method-pills span{border:1.5px solid #1d4b3c;background:#fff5df;padding:8px 11px;font-size:11px;font-weight:850}.method-primary,.method-end>a{display:inline-flex;gap:20px;align-items:center;justify-content:space-between;text-decoration:none;background:#e89f36;border:2px solid #1b3d33;box-shadow:3px 4px 0 #1b3d33;padding:13px 17px;border-radius:4px;font-weight:850}.method-primary:hover,.method-end>a:hover{background:#ffd083;transform:translate(1px,1px);box-shadow:2px 3px 0 #1b3d33}
.method-hero-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:8px;min-width:0;transform:rotate(2deg)}.art-card{display:flex;flex-direction:column;min-height:174px;padding:13px 10px;border:2px solid #1b4036;box-shadow:4px 5px 0 #1b4036;justify-content:space-between;min-width:0}.art-card span{font-weight:800;font-size:12px}.art-card strong{font-size:clamp(11px,1.3vw,17px);font-weight:950;letter-spacing:-.03em;overflow-wrap:anywhere}.art-card b{font-size:38px;text-align:right;font-family:Georgia,serif}.art-orange{background:#ea8f6b}.art-mint{background:#b6d9bf}.art-gold{background:#eeb858}.art-note{grid-column:1/-1;text-align:center;margin-top:16px;font-size:11px;letter-spacing:.11em;font-weight:850;color:#23594a}
.method-principle{display:grid;grid-template-columns:1fr 0.85fr;gap:35px;align-items:center;padding:50px 0 30px}.method-principle h2,.method-section-heading h2,.method-privacy h2,.method-end h2{font-size:clamp(30px,3.6vw,48px);line-height:1.09;letter-spacing:-.05em;margin:12px 0}.method-principle h2 em,.method-privacy h2 em{font-family:Georgia,serif;font-weight:800;color:#0d7767}.method-principle>p{font-size:16px;line-height:1.7;color:#42564d}
.method-section{padding-top:30px}.method-section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 24px}.method-section-heading p{max-width:380px;color:#516359;font-size:14px}.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.method-card{background:#fff8eb;border:2px solid #204d41;border-radius:5px;box-shadow:4px 5px 0 #235647;display:flex;flex-direction:column;padding:24px 21px;min-width:0}.method-card:nth-child(3n+1){background:#f6d1bc}.method-card:nth-child(3n+2){background:#f1d797}.method-card:nth-child(3n){background:#d5e8d9}.method-card-top{display:flex;align-items:center;justify-content:space-between}.method-number{font-size:10px;letter-spacing:.12em;font-weight:900}.method-symbol{font-size:35px;font-weight:900;color:#156c5c}.method-card h2{font-size:24px;letter-spacing:-.04em;line-height:1.16;margin:15px 0 10px}.method-card>p,.method-limitation p{font-size:13.5px;line-height:1.65;margin:0;color:#324d41}.method-limitation{border-top:1.5px solid #50726372;margin:19px 0 18px;padding-top:17px}.method-limitation strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}.method-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.method-link{border:1.5px solid #194c3e;background:#fff8ed;border-radius:3px;padding:9px 12px;text-decoration:none;font-size:12px;font-weight:850;display:inline-flex;gap:8px;align-items:center}.method-link:hover{background:#e9ffed}.method-link.secondary{background:transparent}.method-link:focus-visible,.method-primary:focus-visible,.method-end a:focus-visible{outline:3px solid #ab482d;outline-offset:3px}
.method-privacy{background:#257668;color:#fff9e9;border:2px solid #123c33;box-shadow:6px 7px 0 #143f35;border-radius:5px;margin-top:70px;padding:clamp(25px,4vw,52px)}.method-privacy .method-tag{color:#d9ead2}.method-privacy-top{display:flex;justify-content:space-between}.privacy-emblem{font-size:60px;line-height:1}.method-privacy h2{max-width:690px;color:#fff6dc}.method-privacy h2 em{color:#efc870}.method-privacy p{max-width:800px;line-height:1.75;color:#e7f3e8}.method-privacy .method-link{margin-top:16px;color:#173b31}
.method-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:55px}.method-extra{background:#fff8eb;border:2px solid #cbb89d;border-radius:5px;padding:26px}.method-extra h2{font-size:25px;letter-spacing:-.04em;margin:12px 0}.method-extra li,.method-extra p{font-size:14px;line-height:1.7;color:#4a5d51}.method-extra ol{padding-left:22px}.method-extra li{padding-bottom:8px}.method-references{display:flex;flex-direction:column;gap:8px}.method-references a{padding:9px 0;border-bottom:1px solid #d8c5ad;font-size:13px;font-weight:750;text-decoration:none;color:#166b59}.method-references a:hover{text-decoration:underline}.method-reviewed{margin:26px 0 44px;color:#6a675c;font-size:12px}.method-end{background:#e9af85;border:2px solid #204c41;border-radius:5px;padding:27px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}.method-end h2{font-size:clamp(25px,3vw,37px);margin:10px 0}.method-end>a{white-space:nowrap;background:#fff2d8}
@media(max-width:1000px){.method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.method-hero{grid-template-columns:1fr .7fr}.method-hero-art{grid-template-columns:repeat(2,minmax(0,1fr))}.art-card:last-of-type{display:none}}
@media(max-width:700px){.method-page{width:calc(100% - 30px);padding-top:20px}.method-hero{grid-template-columns:1fr;padding:29px 22px}.method-hero h1{font-size:clamp(44px,11vw,66px)}.method-hero-art{transform:none;grid-template-columns:repeat(3,minmax(0,1fr))}.art-card:last-of-type{display:flex}.art-card{min-height:115px;padding:8px}.art-card b{font-size:25px}.art-card strong{font-size:11px}.method-principle{grid-template-columns:1fr;gap:5px}.method-section-heading{display:block}.method-grid,.method-bottom-grid{grid-template-columns:1fr}.method-end{flex-direction:column;align-items:flex-start}.method-privacy{margin-top:48px}}
@media(max-width:370px){.method-hero-art{grid-template-columns:repeat(2,minmax(0,1fr))}.art-card:last-of-type{display:none}.method-pills span{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.method-primary:hover,.method-end>a:hover{transform:none}}