/* DeviceDIY — professional refinement v2.0. Preserves approved layout and brand. */
:root{--bg:#F9FBFA;--ink:#101820;--muted:#52616A;--line:#E3EBE7;--blue:#079F7E;--pale:#EAF7F2;--green:#087A60;--panel:#fff;--shadow:0 10px 30px rgba(16,24,32,.045);--focus:#075E4D;--radius:18px}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{background:#F9FBFA;color:var(--ink);font-family:Inter,'Segoe UI Variable','Segoe UI',system-ui,-apple-system,Arial,sans-serif;font-size:15.5px;line-height:1.68;font-weight:400;letter-spacing:-.008em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#C7EEE1;color:#101820}
h1,h2,h3,h4{font-family:inherit;color:#101820;letter-spacing:-.034em;text-wrap:balance;font-weight:740}
p,li{overflow-wrap:break-word}
a,button,input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,transform .16s ease}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #079F7E!important;outline-offset:3px!important}
.shell{width:min(1190px,calc(100% - 56px))}
.topbar{background:rgba(255,255,255,.97);border-bottom:1px solid #E8EEEA;box-shadow:0 2px 13px rgba(16,24,32,.026)}
.nav{min-height:78px;gap:24px}
.brand{font-size:22px;font-weight:770;letter-spacing:-.052em;gap:10px;color:#101820;white-space:nowrap}
.brand-logo-image{width:39px;height:39px;object-fit:contain}
.nav-right{font-size:13.5px;font-weight:590;gap:27px;color:#485A56;letter-spacing:-.01em}
.nav-right a{padding:8px 2px}.nav-right a:hover{color:#079F7E}
.nav-badge{background:#E9F7F1;color:#08765E;font-weight:690;border:1px solid #D2ECE1}
/* Homepage hero: original split composition retained */
.hero{padding-top:69px;padding-bottom:61px}
.hero-layout{gap:clamp(30px,4vw,72px)}
.hero-copy{text-align:left}
.eyebrow,.section-mini,.kicker{font-size:11px!important;font-weight:740!important;letter-spacing:.115em!important;text-transform:uppercase}
.eyebrow{background:#EAF7F2!important;color:#067B60!important;border-color:#D4EEE3!important;padding:8px 13px!important}
.hero h1{font-size:clamp(60px,7.2vw,104px);font-weight:790;letter-spacing:-.065em;line-height:1.02;margin:24px 0 18px;color:#101820}
.hero-copy>p,.hero p{font-size:clamp(21px,2.3vw,31px);line-height:1.31;letter-spacing:-.035em;font-weight:460;color:#52606A;max-width:600px}
.features{font-size:12.5px;letter-spacing:0;font-weight:620;color:#52675F;gap:9px}
.features span{line-height:1.3}
.hero-actions{margin-top:26px;gap:12px}
.hero-actions a{min-height:47px;padding:12px 19px;font-weight:690;font-size:13px;letter-spacing:-.005em;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hero-actions a:first-child{background:#079F7E;color:#fff;border:1px solid #079F7E;box-shadow:0 5px 15px #079f7e23}
.hero-actions a:first-child:hover{background:#087F67;border-color:#087F67;box-shadow:0 8px 22px #079f7e26;transform:translateY(-1px)}
.hero-actions a:not(:first-child){background:#fff;color:#17312C;border:1px solid #D8E4DE}
.hero-actions a:not(:first-child):hover{border-color:#079F7E;background:#F3FAF7}
.hero-mini-grid{gap:15px}
.hero-mini-card{background:#fff;border:1px solid #E3EAE6;border-radius:17px;box-shadow:0 9px 26px rgba(16,24,32,.075);font-size:14px;font-weight:660;letter-spacing:-.025em;min-width:0}
.hero-mini-card:hover{border-color:#A8D8C6;box-shadow:0 12px 32px #10182014;transform:translateY(-2px)}
.hero-mini-card span{color:#16241F}
/* Tool discovery and cards */
.section-heading{margin-top:24px;margin-bottom:23px;align-items:center}
.section-heading h2,.home-feature h2,.home-explainer h2,.seo-home h2{font-size:clamp(25px,2.8vw,36px);line-height:1.18;letter-spacing:-.04em;font-weight:760}
.section-heading p{font-size:14px;line-height:1.6;margin-top:8px;color:#63716C}
.count{font-size:12px;font-weight:680;white-space:nowrap;color:#087F67;background:#E9F7F1;padding:7px 11px;border-radius:30px}
.cards{gap:16px;margin-bottom:72px}
.tool-card{min-height:214px;border:1px solid #E5EDE8;border-radius:18px;padding:23px 22px 21px;background:#fff;box-shadow:0 7px 26px rgba(13,52,36,.035)}
.tool-card:hover,.tool-card:focus-visible{border-color:#A4D7C5;box-shadow:0 16px 34px #10182013;transform:translateY(-3px)}
.iconbox{border-radius:13px;margin-bottom:20px}
.tool-title{font-size:16px;line-height:1.32;font-weight:740;letter-spacing:-.022em;color:#17231F}
.tool-desc{font-size:13.25px;line-height:1.59;color:#60716B;margin:8px 0 16px}
.card-bottom{font-size:12.5px;font-weight:740;color:#087D62;letter-spacing:0}
/* Featured/educational content */
.home-feature,.why{border:1px solid #D9ECE2;background:linear-gradient(120deg,#EDF8F3 0%,#F7FCF9 100%);border-radius:23px;padding:clamp(25px,3.6vw,44px);box-shadow:none;margin-bottom:66px}
.home-feature h2,.why h2{max-width:620px;font-weight:750}
.home-feature p,.why p{font-size:14.5px;line-height:1.73;color:#536861}
.home-explainer,.seo-home{margin-top:48px;margin-bottom:70px}
.proof-item{font-size:13.5px;line-height:1.7;border-radius:15px}
.proof-item b{font-size:14px;font-weight:720;color:#14231E}
.seo-home{max-width:min(1190px,calc(100% - 56px))}
.seo-home p,.seo-home li{font-size:14.5px;line-height:1.78;color:#53665D}
/* Dedicated test page: preserve two-column workspace */
.tester{padding-top:31px;padding-bottom:83px}
.back{font-size:13px;color:#087D62;font-weight:690;letter-spacing:-.012em;margin-bottom:13px}
.breadcrumbs{font-size:12px;color:#75837B;margin-bottom:20px}
.tester-head{gap:16px;margin-bottom:26px;align-items:flex-start}
.tester-head .iconbox{width:58px;height:58px;border-radius:15px;flex-shrink:0}
.tester-head h1{font-size:clamp(30px,3.2vw,43px);line-height:1.12;font-weight:770;letter-spacing:-.05em;margin:0 0 9px}
.tester-head p{max-width:760px;font-size:15px;line-height:1.7;color:#57675F;margin:0}
.workspace{gap:20px;align-items:start}
.stage,.instructions{padding:clamp(19px,2.5vw,31px);border-radius:19px;border:1px solid #E0EAE4;background:#fff;box-shadow:0 9px 32px #10182008}
.stage{min-height:370px}
.instructions h3{font-size:18px;font-weight:750;letter-spacing:-.03em;margin:0 0 16px}
.instructions ol{padding-left:22px;margin:0}
.instructions li{font-size:13.75px;line-height:1.69;color:#55685E;padding-left:4px;margin:0 0 12px}
.instructions li::marker{font-weight:760;color:#079F7E}
.hint{background:#EFF8F3;border:1px solid #DAEEE3;border-radius:12px;font-size:12.75px;line-height:1.6;color:#47685A;padding:14px}
.notice{font-size:12px;line-height:1.7;color:#77847D}
.actions{gap:10px;margin:21px 0 16px}
.btn,.hero-actions a,.home-feature a{font-family:inherit;letter-spacing:-.012em}
.btn{min-height:46px;border-radius:11px;padding:11px 17px;font-size:13.5px;font-weight:710;color:#20362F;border:1px solid #CDDDD4;background:#fff;box-shadow:0 1px 1px #10182009}
.btn:hover:not(:disabled){background:#F0F8F3;border-color:#9FCEB8;transform:translateY(-1px)}
.btn.primary{background:#079F7E;border-color:#079F7E;color:#fff;box-shadow:0 4px 12px #079f7e26}
.btn.primary:hover:not(:disabled){background:#087D64;border-color:#087D64;box-shadow:0 6px 15px #079f7e29}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.48;box-shadow:none;transform:none}
.field,select,input[type=text],input[type=number],input[type=range]{accent-color:#079F7E}
.field{background:#fff;min-height:45px;padding:10px 13px;border:1px solid #CADBD1;border-radius:11px;color:#12221B;font-size:14px}
.field:hover{border-color:#93BFA9}.field:focus{border-color:#079F7E;outline:3px solid #079f7e24}
.label{font-size:12.5px;font-weight:730;letter-spacing:.008em;margin:17px 0 7px;color:#263A30}
.small{font-size:12.75px;line-height:1.65;color:#6A7971}
.status{border-radius:12px;padding:14px 16px;min-height:52px;background:#F3F7F4;color:#4F6258;font-size:13.25px;line-height:1.59;border:1px solid #E4EEE7}
.status.good{background:#EAF8F0;color:#086047;border-color:#C5E9D6}
.status.bad{background:#FFF2F1;color:#A12E31;border-color:#F2D4D2}
.meter{height:13px;background:#E5F1EA}.meter div{background:linear-gradient(90deg,#65C4A7,#079F7E)}
.level{font-size:30px;font-weight:760;color:#087D62;letter-spacing:-.04em}
.preview{border-radius:13px;background:#101820}
.key-visual,.mouse-pad,.touch-pad{border-radius:15px;background:#F5FAF7;border-color:#BFD8CB}
.key-visual strong{font-weight:760;letter-spacing:-.04em}
.stat{background:#FBFDFB;border:1px solid #E3EEE6;border-radius:12px}
.stat b{font-weight:750;color:#16281F;letter-spacing:-.03em}
.check{border-color:#E5EEE8;border-radius:11px;background:#FCFEFD;padding:13px 14px;font-size:13px}
/* SEO content and answers */
.tool-detail{margin-top:56px}
.tool-detail h2{font-size:clamp(22px,2.4vw,30px);font-weight:750;letter-spacing:-.04em;line-height:1.25;margin-top:38px;margin-bottom:15px}
.tool-detail h3{font-size:16px;font-weight:730;line-height:1.42;letter-spacing:-.025em}
.tool-detail p,.tool-detail li,.privacy-page p,.privacy-page li{font-size:14.5px;line-height:1.79;color:#52635A}
.tool-detail li{margin-bottom:7px}
.answer-box,.premium-note{border:1px solid #D3E9DB;background:#F0F9F3;border-radius:16px;padding:clamp(18px,2.4vw,26px);box-shadow:none}
.answer-box strong,.premium-note strong{color:#08775C;font-size:13px;font-weight:760}
.content-grid{gap:15px}
.info-tile{background:#fff;border:1px solid #E4ECE5;border-radius:15px;padding:22px;box-shadow:0 4px 18px #10182006}
.info-tile h3{margin-top:0}
.faq-list{display:grid;gap:10px}
.faq-list details{border:1px solid #E0EAE3;background:#fff;border-radius:13px;padding:0;box-shadow:0 3px 13px #10182005;overflow:hidden}
.faq-list summary{cursor:pointer;font-size:14px;font-weight:690;letter-spacing:-.012em;padding:17px 20px;color:#1D3025;list-style-position:inside}
.faq-list details[open] summary{color:#08775C;background:#F5FAF7;border-bottom:1px solid #E4EEE7}
.faq-list details p{margin:0;padding:16px 20px 19px}
.related-links{gap:10px}.related-links a{border:1px solid #D7E8DF;color:#087D62;background:#fff;font-size:13px;font-weight:670;border-radius:11px;padding:12px 15px}
.related-links a:hover{background:#EFF8F2;border-color:#95CCB5}
.trust-caption{font-size:12.25px!important;color:#7C8A81!important;border-top:1px solid #E8EEE9;margin-top:35px;padding-top:19px}
/* Standalone pages: professional consistency */
.privacy-page{border:1px solid #E8EFEA;background:#fff;border-radius:20px;box-shadow:0 12px 40px #10182008}
.privacy-page h1{font-size:clamp(32px,4.3vw,52px);font-weight:770;line-height:1.12;letter-spacing:-.055em}
.privacy-page h2{font-size:clamp(21px,2.3vw,27px);line-height:1.3;font-weight:740;letter-spacing:-.036em;margin:34px 0 13px}
.privacy-page a{color:#087F64;text-underline-offset:3px}
.foot{border-top:1px solid #E6EDE8;background:#fff;padding-top:30px;padding-bottom:36px;font-size:12.5px;color:#6D7B72}
.foot a:hover{color:#087D62}
/* Mobile and keyboard support */
@media(max-width:900px){.shell{width:min(100% - 40px,1190px)}.hero{padding-top:48px;padding-bottom:45px}.workspace{gap:15px}.nav-right{gap:15px}.tool-card{min-height:205px}}
@media(max-width:640px){.shell{width:calc(100% - 34px)}.nav{min-height:68px;gap:10px}.brand{font-size:20px;letter-spacing:-.047em}.brand-logo-image{width:35px;height:35px}.hero{padding-top:40px;padding-bottom:40px}.hero-layout{gap:30px}.hero h1{font-size:clamp(47px,11.5vw,66px);letter-spacing:-.067em;margin:20px 0 15px}.hero-copy>p,.hero p{font-size:clamp(20px,5.3vw,25px);line-height:1.36}.hero-actions{gap:9px}.hero-actions a{padding:11px 14px;min-height:45px;font-size:12px}.hero-mini-grid{gap:10px}.hero-mini-card{border-radius:14px}.section-heading{margin-bottom:17px}.section-heading h2{font-size:26px}.cards{gap:11px;margin-bottom:45px}.tool-card{border-radius:15px;padding:17px;min-height:196px}.tool-title{font-size:14.5px}.tool-desc{font-size:12.5px;line-height:1.53}.card-bottom{font-size:12px}.iconbox{margin-bottom:14px}.tester{padding-top:21px}.tester-head{gap:12px;margin-bottom:19px}.tester-head h1{font-size:29px}.tester-head p{font-size:13.75px;line-height:1.62}.stage,.instructions{padding:18px;border-radius:16px}.stage{min-height:300px}.btn{min-height:45px;padding:10px 14px}.tool-detail{margin-top:42px}.tool-detail h2{font-size:23px;margin-top:30px}.privacy-page{border-radius:16px}.home-feature,.why{padding:24px;margin-bottom:45px}}
@media(max-width:380px){.shell{width:calc(100% - 28px)}.hero h1{font-size:45px}.hero-actions a{font-size:11.5px;padding:10px 12px}.tool-card{padding:14px}.tool-title{font-size:13.5px}.tool-desc{font-size:12px}.section-heading h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* DeviceDIY integrated editorial cross-links */
.guide-teaser{background:#f0faf5;border:1px solid #caeadb;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin:28px 0;color:#101820}.guide-teaser strong{font-size:17px;font-weight:780;letter-spacing:-.025em}.guide-teaser p{margin:5px 0 0;font-size:13px;line-height:1.6;color:#52695d;max-width:650px}.guide-teaser a{background:#079f7e;color:#fff;border-radius:10px;padding:12px 16px;font-weight:750;font-size:12px;white-space:nowrap}.guide-teaser a:hover{background:#06775f}.guide-teaser a:focus-visible{outline:3px solid #70d8bc;outline-offset:3px}@media(max-width:680px){.guide-teaser{display:block;padding:19px}.guide-teaser a{display:inline-block;white-space:normal;margin-top:15px}}